How to make a conical gradient in iOS using Core Graphics / Quartz 2D?

How can I draw such a conical gradient in iOS using the Core Graphics / Quartz 2D API?

Example of a conical gradient http://ods.com.ua/win/eng/other/gimpdoc-html/painta27.gif

+8
ios core-graphics radial-gradients
source share
4 answers

There is no quartz function for this gradient style. If you are not ready to delve into mathematics, I would suggest that you use pre-made images for this. This is not a problem if you only need it for a transparency mask.

+1
source share

I recently created my own CALayer class for this: AngleGradientLayer

It has not been tested for performance, so be careful.

screenshot

+6
source share

I needed a clean Swift solution for this, and for me it was also a difficult task.

In the end, I wrote an AEConicalGradient that does this with an interesting approach (using a circle and drawing lines of different colors for the center).

AEConicalGradient

+2
source share

If someone is still looking for a solution, Apple has finally introduced the .conic gradient type in iOS 12. Ideal for .conic to mask to create a circular .conic bar with a gradient.

Example:

 let gradientLayer = CAGradientLayer() gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5) gradientLayer.endPoint = CGPoint(x: 0.5, y: 0) gradientLayer.type = .conic gradientLayer.colors = [UIColor.red.cgColor, UIColor.orange.cgColor, UIColor.green.cgColor] gradientLayer.frame = bounds 

conic_gradient

0
source share

All Articles