Shape Gradient Fill

[traviskirton]

Here's a starting point:

override func setup() {
    let star = C4Star(center: canvas.center, pointCount: 10, innerRadius: 30, outerRadius: 60)
    canvas.add(star)

    star.lineWidth = 10.0

    let gradient = C4Gradient(frame: C4Rect(0,0,star.width,star.height), colors:[C4Pink,orange])

    let mstar = C4Star(center: gradient.center, pointCount: 10, innerRadius: 30, outerRadius: 60)

    gradient.mask = mstar
    gradient.origin = star.bounds.origin
    star.layer?.addSublayer(gradient.layer!)

    canvas.addTapGestureRecognizer { (location, state) -> () in
    }
}

Possible solution:

• create a gradient for the shape's frame
• create a shape for the layer's stroke
• clear the shape layer's color / fill
• add the fill as a sublayer
• add the stroke layer as a sublayer

Probably best to apply a C4Gradient object, while setting nil to strokeColor, etc.

[traviskirton]

override func setup() {
    createCircle()
    createStar()
}

func createStar() {
    let s = C4Star(center: canvas.center, pointCount: 5, innerRadius: 25, outerRadius: 50)
    let m = C4Star(center: canvas.center, pointCount: 5, innerRadius: 25, outerRadius: 50)


    let g = C4Gradient(frame: s.frame, colors: [C4Pink, C4Blue])

    canvas.add(s)

    let l = g.gradientLayer

    UIGraphicsBeginImageContextWithOptions(CGSize(g.size), true, 1.0)
    let context = UIGraphicsGetCurrentContext()!
    l.renderInContext(context)
    let uiimage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();

    s.shapeLayer.contents = uiimage.CGImage!
    s.fillColor = clear
    s.mask = m

    s.lineWidth = 10.0

    canvas.addTapGestureRecognizer { (location, state) -> () in
        C4ShapeLayer.disableActions = true
        if s.shapeLayer.contents != nil {
            s.fillColor = red
            s.shapeLayer.contents = nil
        } else {
            s.shapeLayer.contents = uiimage.CGImage!
            s.fillColor = clear
        }
    }
}

func createCircle() {
    let s = C4Circle(center: canvas.center, radius: 50)
    let m = C4Circle(center: C4Point(s.width/2,s.height/2), radius: 50)

    let g = C4Gradient(frame: s.frame, colors: [C4Pink, C4Blue])

    canvas.add(s)

    let l = g.gradientLayer

    UIGraphicsBeginImageContextWithOptions(CGSize(g.size), true, 1.0)
    let context = UIGraphicsGetCurrentContext()!
    l.renderInContext(context)
    let uiimage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();

    let img = C4Image(uiimage: uiimage)
    canvas.add(img)
    s.shapeLayer.contents = uiimage.CGImage!
    s.fillColor = clear
    s.mask = m

    s.lineWidth = 10.0

    s.center = C4Point(canvas.center.x,canvas.height/3)
}

[traviskirton]

Sets the contents of the shape layer to an image generated from a gradient.
@Aleph7 if you think this process is okay, i'll go ahead and make it nice.

[alejandro-isaza]

Looks good.