渐变色饼图 - OC版

2022-09-20  本文已影响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;

相关图如下

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

猜你喜欢

热点阅读