CODEWITHSUNDEEP
iosswiftcore-graphicsuibezierpath
jjjjjjjj
jjjjjjjj

Reputation: 4523

Draw gradient under UIBezierPath

I have drawn a curved line. I want to put a gradient from the view all the way up to the line (so that the gradient curves along with the line.)

edit: here is a photo of what the code below produces:

enter image description here

I know how to draw the line, and I know how to add a regular gradient, but just not the two together. Here is my code:

override func drawRect(rect: CGRect) {

    // draw the curved line, this code works just fine.
    let path1 = UIBezierPath()
    path1.lineWidth = 1.1
    UIColor.greenColor().setStroke()
    path1.moveToPoint(CGPoint(x: 0, y: bounds.height/2))
    path1.addQuadCurveToPoint(CGPoint(x: bounds.width, y: bounds.height/2), controlPoint: CGPoint(x: bounds.width/2, y: (bounds.height * 0.75)))
    path1.stroke()

    // my attempt to draw the gradient:

    let gradient = CAGradientLayer()
    gradient.startPoint = CGPoint(x: 1, y: 1)
    gradient.endPoint = CGPoint(x: 0, y: 0)
    let colors = [UIColor.whiteColor().CGColor, UIColor(red: 0, green: 1, blue: 1, alpha: 0.4).CGColor]
    gradient.colors = colors

    // the following line is where I need help
    gradient.frame = CGRectMake(0, 475, bounds.width, path1.bounds.height)

    layer.addSublayer(gradient)


}

what can I set gradient.frame equal to so that it's upper limit is the previously drawn path? Answer in Swift please (i've seen a lot of other questions on this subject but they are all in objective C)

Thanks

Upvotes: 3

Views: 2981

Answers (1)

jjjjjjjj
jjjjjjjj

Reputation: 4523

I have found the answer.

The following code gave me this: Valid XHTML .

Here is the code:

   override func drawRect(rect: CGRect) {

    //draw the line of UIBezierPath 
    let path1 = UIBezierPath()
    path1.lineWidth = 1.1
    UIColor(white: 1, alpha: 1).setStroke()
    path1.moveToPoint(CGPoint(x: 0, y: bounds.height/2))
    path1.addQuadCurveToPoint(CGPoint(x: bounds.width, y: bounds.height/2), controlPoint: CGPoint(x: bounds.width/2, y: (bounds.height * 0.65)))

    path1.stroke()

  // add clipping path. this draws an imaginary line (to create bounds) from the 
   //ends of the UIBezierPath line down to the bottom of the screen
    let clippingPath = path1.copy() as! UIBezierPath
    clippingPath.addLineToPoint(CGPoint(x: self.bounds.width, y: self.bounds.height))
    clippingPath.addLineToPoint(CGPoint(x: 0, y: bounds.height))
    clippingPath.closePath()

    clippingPath.addClip()

    // create and add the gradient
    let colors = [UIColor(red: 0, green: 1, blue: 1, alpha: 0.45).CGColor, UIColor.whiteColor().CGColor]


    let colorSpace = CGColorSpaceCreateDeviceRGB()


    let colorLocations:[CGFloat] = [0.0, 1.0]


    let gradient = CGGradientCreateWithColors(colorSpace,
        colors,
        colorLocations)

    let context = UIGraphicsGetCurrentContext()
    let startPoint = CGPoint(x: 1, y: 1)
    let endPoint = CGPoint(x: 1, y: bounds.maxY)

    // and lastly, draw the gradient.
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, CGGradientDrawingOptions.DrawsAfterEndLocation)



}

Upvotes: 11

Related Questions