渐变色饼图 - OC版

//1.添加设计师提供一张渐变色图 

    UIImageView*imageView = [[UIImageView alloc] initWithFrame:self.bounds];

    imageView.image= [UIImage imageNamed:@"gradient_image"];

    [self addSubview:imageView];


//2.画贝塞尔曲线,例如画弧形

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2)

                                                    radius:[UIScreen mainScreen].bounds.size.width * 0.17

                                                    startAngle:0 * M_PI

                                                     endAngle:2 * M_PI

                                                     clockwise:YES];

     path.lineWidth=60;


//3.新建CAShapeLayer

 CAShapeLayer *trackLayer = [[CAShapeLayer alloc] init];

   trackLayer.frame=self.bounds;

   trackLayer.position = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);//此处保持和贝塞尔曲线的中心点一致

   trackLayer.path= path.CGPath;

   trackLayer.fillColor = UIColor.clearColor.CGColor;

   trackLayer.strokeColor = UIColor.whiteColor.CGColor;

   trackLayer.lineWidth= path.lineWidth+2;

   trackLayer.shadowOpacity=0.3;

   trackLayer.shadowOffset=CGSizeMake(0,2);


//4.设置 第1步的图片的蒙版为第3步的CAShapeLayer

    imageView.layer.mask= trackLayer;


相关图如下

设计师提供一张渐变色图


最终生成的图


画弧形或者圆的参考图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容