美文网首页
渐变色饼图 - OC版

渐变色饼图 - OC版

作者: 小林儿 | 来源:发表于2022-09-20 16:36 被阅读0次

//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;

相关图如下

设计师提供一张渐变色图 最终生成的图 画弧形或者圆的参考图

相关文章

网友评论

      本文标题:渐变色饼图 - OC版

      本文链接:https://www.haomeiwen.com/subject/dvzbortx.html