Search code examples
iosswiftcalayercgcontextcggradientref

Making an oval gradient in shape


I am trying to find out how to create an oval gradient which is not a perfect circle. For example an american football/rugby/eye shape instead of a circle.

At the moment I have created a CALayer subclass as below which creates a circle. How can I get this to a oval shape (as mentioned above)?

class CircleGradientLayer: CALayer {

var startRadius: CGFloat?
var startCenter: CGPoint?
var endCenter: CGPoint?
var endRadius: CGFloat?
var locations: [CGFloat]?
var colors: [UIColor]?

override func drawInContext(ctx: CGContext) {
    super.drawInContext(ctx)


    if let colors = self.colors, let locations = self.locations, let startRadius = self.startRadius, let startCenter = self.startCenter, let endCenter = self.endCenter, let endRadius = self.endRadius {
        var colorSpace: CGColorSpaceRef?

        var components = [CGFloat]()
        for i in 0 ..< colors.count {
            let colorRef = colors[i].CGColor
            let colorComponents = CGColorGetComponents(colorRef)
            let numComponents = CGColorGetNumberOfComponents(colorRef)
            if colorSpace == nil {
                colorSpace = CGColorGetColorSpace(colorRef)
            }
            for j in 0 ..< numComponents {
                let component = colorComponents[j]
                components.append(component)
            }
        }

        if let colorSpace = colorSpace {
            let gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, locations.count)
            CGContextDrawRadialGradient(ctx, gradient, startCenter, startRadius, endCenter, endRadius, CGGradientDrawingOptions.DrawsAfterEndLocation)

        }
    } 
}
}

example


Solution

  • One way to do it would be to set your layer's transform by scaling the X up by some factor. For example:

    layer.transform = CATransform3DMakeScale(1.5, 1.0)
    

    Not sure if that's the best solution or not, but it should work!