iOS 绘制颜色渐变圆环

Posted 2023-04-18

参考技术A 本文主要介绍一种绘制颜色渐变的进度圆环. 先上效果图:

实现思路:
CAShapeLayer+UIBezierPath+CAGradientLayer

步骤:

2.绘制背景圆环, 并将其添加到view的layer层上.

3. 使用CAGradientLayer 绘制渐变的背景色
由于CAShapeLayer不能顺着弧线进行渐变只能指定两个点之间进行渐变, 所以四种颜色的渐变只能是将view分成四个小的部分, 分别实现两种颜色间的渐变. 最后在组合在一起, 形成四种颜色的渐变.

4. 将颜色图层切成圆环
@property (nonatomic, strong) CAShapeLayer *progressLayer;
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.strokeColor = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
_progressLayer.lineWidth = 20;
_progressLayer.path = path.CGPath;
gradientLayer.mask = _progressLayer;

5. 利用locations 属性调整颜色空间
根据上面的运行结果可以看出底部的颜色交接的地方有颜色的断层. 主要是第三部分底部的黄色区域较小导致的. 可以利用locations数组进行微调.
默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组(以NSNumber包装)。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。0.0代表着渐变的开始，1.0代表着结束。
[gradientLayer2 setLocations:@[@0.3, @0.8]];

canvas之渐变

参考技术A 以下有两种不同的方式来设置Canvas渐变：

上色：

示例：线性渐变

示例：径向渐变

其它文章请访问：

参考： 路径-CanvasAPI|MDN