iOS 绘制颜色渐变圆环

您所在的位置：网站首页 › mask-image填充圆环 › iOS 绘制颜色渐变圆环

iOS 绘制颜色渐变圆环

2024-07-16 01:16| 来源: 网络整理| 查看: 265

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

实现思路: CAShapeLayer+UIBezierPath+CAGradientLayer

UIBezierPath 用来绘制圆环路径; CAShapeLayer 根据UIBezierPath绘制的曲线路径渲染出图形, 利用GPU渲染节省内存,提高性能; CAGradientLayer 用来绘制颜色渐变的图层, 最后添加到view的layer用来展示;

步骤:

先创建一个UIView的子类CirlceView, 在其内部实现圆环的绘制. CircleView *circle = [[CircleView alloc] initWithFrame:CGRectMake(80, 100, 200, 200)]; circle.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:circle]; Paste_Image.png

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

//创建背景圆环 CAShapeLayer *trackLayer = [CAShapeLayer layer]; trackLayer.frame = self.bounds; //清空填充色 trackLayer.fillColor = [UIColor clearColor].CGColor; //设置画笔颜色即圆环背景色 trackLayer.strokeColor = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor; trackLayer.lineWidth = 20; //设置画笔路径 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:self.frame.size.width/2.0 - 10 startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES]; //path 决定layer将被渲染成何种形状 trackLayer.path = path.CGPath; [self.layer addSublayer:trackLayer]; Paste_Image.png

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

CGFloat width = rect.size.width; CGFloat height = rect.size.height; CALayer *gradientLayer = [CALayer layer]; gradientLayer.frame = self.bounds; CAGradientLayer *gradientLayer1 = [CAGradientLayer layer]; gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0, height/2.0); gradientLayer1.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor orangeColor].CGColor]; //startPoint和endPoint属性，他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1} //startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置. //当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化 //当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化 //其余的颜色沿着对角线方向变化 gradientLayer1.startPoint = CGPointMake(0.2, 0); gradientLayer1.endPoint = CGPointMake(0.8, 1); [gradientLayer addSublayer:gradientLayer1]; CAGradientLayer *gradientLayer2 = [CAGradientLayer layer]; gradientLayer2.frame = CGRectMake(width/2.0, width/2.0, width/2.0, height/2.0); gradientLayer2.colors = @[(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor]; [gradientLayer2 setLocations:@[@0.3, @0.8,@1]]; gradientLayer2.startPoint = CGPointMake(0, 0); gradientLayer2.endPoint = CGPointMake(0, 1); [gradientLayer addSublayer:gradientLayer2]; CAGradientLayer *gradientLayer3 = [CAGradientLayer layer]; gradientLayer3.frame = CGRectMake(0, width/2.0, width/2.0, height/2.0); gradientLayer3.colors = @[(__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor]; gradientLayer3.startPoint = CGPointMake(0.5, 1); gradientLayer3.endPoint = CGPointMake(0.5, 0); [gradientLayer addSublayer:gradientLayer3]; CAGradientLayer *gradientLayer4 = [CAGradientLayer layer]; gradientLayer4.frame = CGRectMake(0, 0, width/2.0, height/2.0); gradientLayer4.colors = @[(__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor]; gradientLayer4.startPoint = CGPointMake(0.5, 1); gradientLayer4.endPoint = CGPointMake(0.5, 0); [gradientLayer addSublayer:gradientLayer4]; [self.layer addSublayer:gradientLayer]; Paste_Image.png

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;

Paste_Image.png

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

[gradientLayer3 setLocations:@[@0.2,@0.8]]; Paste_Image.png

【本文地址】

iOS 绘制颜色渐变圆环

iOS 绘制颜色渐变圆环

今日新闻

推荐新闻