美文网首页
渐变色饼图 - 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