How to apply Gradient color using UIGraphicsGetCurrentContext

Question

I am drawing triangle using following code

class TriangleView : UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

        context.beginPath()
        context.move(to: CGPoint(x: (rect.maxX / 2.0), y: rect.maxY))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        context.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        context.closePath()

        context.setFillColor(red: 0.0, green: 0.7, blue: 0.0, alpha: 1)
        context.fillPath()
    }
}

second last line is filling color with green. I want to replace this green color with gradient.

The code I tried is bellow

let triangle = TriangleView(frame: CGRect(x: triangleX, y: triangleY, width: triangleWidth , height: triangleHeight))

        // MAKING GRADIENT COLOR
        gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]

        triangle.layer.addSublayer(gradientLayer)
        triangle.backgroundColor = UIColor.clear

it has no effect, color is still green

Here's a good tutorial on adding gradients when using contexts and filling non-rectangular shapes: https://www.raywenderlich.com/162313/core-graphics-tutorial-part-2-gradients-contexts — DonMag, Mar 15 '18 at 13:36

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

It a little more difficult to add a gradient to a path using CGContext. It is possible, if you're interested, you can use this solution: How to fill a path with gradient in drawRect:?

However, I prefer using CAShapeLayer and masking my CAGradientLayer. I find it to be easier and less code.

class View: UIView {
    
    var gradientLayer = CAGradientLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        let gradientMask = CAShapeLayer()
        let path = CGMutablePath()
        path.move(to: CGPoint(x: (bounds.maxX / 2.0), y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.minY))
        path.closeSubpath()
        gradientMask.path = path

        gradientLayer.colors = [UIColor.red, UIColor.yellow].map{$0.cgColor}
        gradientLayer.mask = gradientMask
        layer.insertSublayer(gradientLayer, at: 0)
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

I used playground and got something like this:

How to apply Gradient color using UIGraphicsGetCurrentContext

1 Answers1