How can I draw such a conical gradient in iOS using Core Graphics / Quartz 2D API?
(source: ods.com.ua)
Asked
Active
Viewed 6,747 times
4 Answers
16
If anyone is still looking for a solution, Apple finally introduced .conic gradient type in iOS 12. Perfect for masking to create circular progress bar with 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
Michał Kwiecień
- 2,734
- 1
- 20
- 23
-
1As .conic available from iOS 12 how we can achieve this in previous version(iOS 11) – Ahmed Sahib Apr 03 '19 at 12:32
-
You have to look for other solutions proposed in this question. – Michał Kwiecień Apr 03 '19 at 16:03
6
Recently I've made a custom CALayer class for this: AngleGradientLayer
It's not tested for performance, so beware.
paiv
- 5,491
- 22
- 30
3
I wanted pure Swift solution for this, and it was also kind of a challenging task for me.
At the end, I wrote AEConicalGradient which does that with interesting approach (by using a circle and drawing lines of different colors to the center).
tadija
- 2,981
- 26
- 37
1
There is no Quartz function for this style of gradient. Unless you're ready to dig into mathematics behind it, I'd suggest you use pre-made images for this. It's not a problem if you need it only for opacity mask.
paiv
- 5,491
- 22
- 30
-
It's very easy to do if you have to support <12, but in fact, they added it to 12 so it's now included in iOS – Fattie Aug 19 '19 at 13:12
-
2Where have they added it to CoreGraphcs? I only see .conic in CALayer, but CoreGraphics doesn't render .conic only radial and linear. – Peter Suwara Feb 20 '20 at 14:59