iOS 圆形刻度(以及鸿蒙版)

鸿蒙版请看这里juejin.cn/post/749411…

一、首先上效果图

二、其中关键点就是用到贝塞尔曲线和三角函数。废话不多说直接上代码。

1、计算坐标点

-(CGPoint)getPointWithRadius:(CGFloat)radius center:(CGPoint)center angle:(CGFloat)angle{
    **double** x = radius * cos(2 * M_PI + M_PI_2 - angle);
    **double** y = radius * sin(2 * M_PI + M_PI_2 - angle);
    **return** CGPointMake(center.x + x, center.y - y);
}

2、计算圆弧和刻度

    **double** cirle_wh = **self**.height - space;
    **double** radius = cirle_wh / 2.0 - 30;
    **double** offset = M_PI * 2 / 6.0;//M_PI/3=60°
    **double** startAngle = -M_PI_2;

    CGPoint center = CGPointMake(**self**.width / 2, **self**.height / 2);
    CGFloat endAngle = 5 * offset + startAngle;
    UIBezierPath *bgPath = [UIBezierPath bezierPathWithArcCenter: center radius:radius startAngle:startAngle endAngle:endAngle clockwise:**YES**];

    CAShapeLayer *blueLayer1 = [CAShapeLayer layer];
    blueLayer1.lineWidth = 60;
    blueLayer1.path = bgPath.CGPath;
    blueLayer1.strokeColor = rgba(249, 168, 168, 1.0).CGColor;
    blueLayer1.fillColor = UIColor.clearColor.CGColor;
    [self.layer addSublayer:blueLayer1];


    double divide = 51;//0-50
    double perAngle = (5 * offset) / (divide - 1);//等分弧度
    double rulingRadius = radius + 35;
    
    for (NSInteger i = 0; i < divide; i++) {
        CAShapeLayer *line = [CAShapeLayer layer];
        line.fillColor   = [UIColor clearColor].CGColor;
        line.strokeColor = [UIColor blackColor].CGColor;
        line.lineCap     = kCALineCapSquare;
        CGPoint startPoint = CGPointZero;
        **if**((i % 5) == 0) {
            startPoint = [**self** getPointWithRadius:rulingRadius center:center angle:perAngle * i];
            line.lineWidth = 3;
        }**else**{
            startPoint = [**self** getPointWithRadius:rulingRadius + 5 center:center angle:perAngle * i];
            line.lineWidth = 2;
        }
        CGPoint endPoint = [**self** getPointWithRadius:rulingRadius + 8 center:center angle:perAngle * i];


        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:startPoint];
        [path addLineToPoint:endPoint];

        line.path = path.CGPath;
        [**self**.layer addSublayer:line];
    }

3、刻度值

    **for** (NSInteger j = 0; j < 6; j++) {
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,0, 0)];
        label.textAlignment = NSTextAlignmentCenter;
        label.text = [NSString stringWithFormat:@"%ld",(**long**)(j * 10)];
        label.textColor = [UIColor blackColor];
        label.backgroundColor = UIColor.clearColor;
        label.font      = [UIFont AppleBoldPingFangSCFontSize:14.f];
        [label sizeToFit];

        label.center = [**self** getPointWithRadius:labelRadius center:center angle:M_PI / 3 * j];

        [**self** addSubview:label];
    }