ios - 具有多个弧线的 UIBezierPath

Question

嘿嘿

我正在尝试在 View 中绘制具有动态宽度的圆弧。

我已经构建了一个包含多个带有弧线的 UIBezierPath 的数组，然后我一个接一个地绘制。这是代码:

    - (void)drawRect:(CGRect)rect
    {
    // Drawing code

    CGFloat radious;
    if (self.bounds.size.width < self.bounds.size.height) {
        radious = self.bounds.size.width / 2;
    }
    else{
        radious = self.bounds.size.height / 2;
    }

    float oneGradeInRadians = (float)(2 * M_PI) / 360.f;
    float radiandToDraw = (float)self.finalAngleRadians - self.initialAngleRadians;
    float splitMeasure = oneGradeInRadians;
    int numberOfArcs = radiandToDraw / splitMeasure;

    NSMutableArray *arrayOfBeziersPaths = [NSMutableArray arrayWithCapacity:numberOfArcs];
    for (int i = 0; i < numberOfArcs; i++) {

         float startAngle = self.initialAngleRadians + (i * splitMeasure);
         float endAngle = self.initialAngleRadians +((i + 1) * splitMeasure);
         UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:radious - self.widthLine.floatValue startAngle:startAngle endAngle:endAngle clockwise:YES];
        bezierPath.lineWidth = self.widthLine.floatValue + i/20;
        float hue = (float)(i / 3.f);
        UIColor *color = [UIColor colorWithHue:hue/360.0 saturation:1 brightness:1 alpha:1];
        [color setStroke];

        [arrayOfBeziersPaths addObject:bezierPath];
    }



    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineJoin(context, kCGLineJoinMiter);
    //We saved the context
    CGContextSaveGState(context);
    for (int i = 0; i < numberOfArcs; i++) {
        [(UIBezierPath *)[arrayOfBeziersPaths objectAtIndex:i] stroke];
        [(UIBezierPath *)[arrayOfBeziersPaths objectAtIndex:i] fill];
     }

    //Restore the contex
    CGContextRestoreGState(context);
    }

通过这种方式，我得到了正确的形状，但是，我也在弧线之间得到了恼人的线条:

我认为问题可能是在弧之间更改的属性，但我完全迷失了，或者也许有另一种更好的方法来构建它。

我尝试创建多个 UIBezierPath 路径，并将它们添加到一个唯一的 UIBezierPath 中，然后我填充并填充该路径。我没有得到烦人的线条，但问题是我无法修改线条宽度，因此我无法获得相同的效果。

有什么想法吗？谢谢

Answer 1

不要创建许多这样的路径。只需创建两条圆弧(内圆、外圆)和连接两端的两条直线即可。然后填充路径。

在空 viewController 的 viewDidLoad 中添加以下代码并检查。

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGFloat k =0.5522847498;
    UIBezierPath *path =[UIBezierPath bezierPath];
    CGFloat radius=130;
    [path addArcWithCenter:CGPointMake(0, 0) radius:radius startAngle:M_PI_2 endAngle:M_PI clockwise:NO];

    CGFloat start=10;
    CGFloat increment=5;
    [path addLineToPoint:CGPointMake(-radius-start, 0)];
    [path addCurveToPoint:CGPointMake(0, -radius-start-increment) controlPoint1:CGPointMake(-radius-start, -(radius +start)*k) controlPoint2:CGPointMake(-(radius+start)*k, -radius-start-increment)];
    [path addCurveToPoint:CGPointMake(radius+start+2*increment, 0) controlPoint1:CGPointMake((radius+start+increment)*k, -radius-start-increment) controlPoint2:CGPointMake(radius+start+2*increment, (-radius-start-increment)*k)];
    [path addCurveToPoint:CGPointMake(0, radius+start+3*increment) controlPoint1:CGPointMake(radius+start+2*increment, (radius+start+2*increment)*k) controlPoint2:CGPointMake((radius+start+2*increment)*k,radius+start+3*increment)];
    [path addLineToPoint:CGPointMake(0,radius)];

    CAShapeLayer *layer =[CAShapeLayer layer];
    [layer setFrame:CGRectMake(150, 200, 300, 300)];
    [layer setFillColor:[UIColor greenColor].CGColor];
    [layer setStrokeColor:[UIColor blackColor].CGColor];
    [layer setPath:path.CGPath];
    [self.view.layer addSublayer:layer];
}

它产生的结果如下: