ios - 围绕 UIBezierPath 的可见部分绘制路径

Question

是否可以围绕 UIBezierPath 的可见部分绘制路径？

这是我的问题的一个例子



这是我想要完成的



这是我到目前为止得到的:

- (void)drawRect:(CGRect)rect {
  CGFloat side = MIN(rect.size.width, rect.size.height);
  CGPoint center = CGPointMake(rect.size.width / 2.0f, rect.size.height / 2.0f);

  UIColor *yinYangColor = [UIColor whiteColor];

  UIBezierPath *yinYangPath = [UIBezierPath bezierPath];

  // Draw Yin&Yang part
  [yinYangPath addArcWithCenter:CGPointMake(center.x, center.y - side / 4.0f) radius:side / 4.0f startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:YES];
  [yinYangPath addArcWithCenter:CGPointMake(center.x, center.y + side / 4.0f) radius:side / 4.0f startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
  [yinYangPath addArcWithCenter:CGPointMake(center.x, center.y) radius:side / 2.0f startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
  [yinYangPath closePath];
  [yinYangColor setFill];
  [yinYangPath fill];

  // Add border
  CAShapeLayer *borderLayer = [[CAShapeLayer alloc] init];
  borderLayer.path = yinYangPath.CGPath;
  borderLayer.fillColor = [UIColor clearColor].CGColor;
  borderLayer.strokeColor = [UIColor blackColor].CGColor;
  borderLayer.lineWidth = 5.0f;
  [self.layer addSublayer:borderLayer];
}

Answer 1

角度 π/2 弧度沿正 y 轴。

在标准 UIKit 几何中，正 y 轴指向屏幕底部。因此，顶部弧线(在 center.y - side/4 处)需要以角度 -π/2 开始并以角度 π/2 结束。由于您将这些向后移动，因此您的第二条弧线不会从您的第一条弧线结束的地方开始，因此您的路径包含连接这些点的直线。你的第二个和第三个弧也是如此。图像中可见的单条直线实际上是这两条线的组合。

另外，顺便提一下，rect传递给 drawRect:理论上不一定是 View 的界限。最好不要这样对待它。

此外，您不应该在 drawRect: 中添加子层。 .您应该在 init 中执行此操作或 layoutSubviews你应该确保你不复制图层。我想也许你正在使用 CAShapeLayer因为你不希望边界被切断。我会通过按边框宽度插入 View 边界来解决这个问题:

- (void)drawRect:(CGRect)dirtyRect {
    CGFloat lineWidth = 4;
    CGRect rect = CGRectInset(self.bounds, lineWidth / 2, lineWidth / 2);
    CGFloat side = MIN(rect.size.width, rect.size.height);
    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));

    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat smallRadius = side / 4;
    [path addArcWithCenter:CGPointMake(center.x, center.y - smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:NO];
    [path addArcWithCenter:CGPointMake(center.x, center.y + smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    [path addArcWithCenter:center radius:side / 2 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
    [path closePath];
    [path setLineJoinStyle:kCGLineJoinRound];
    [path setLineWidth:lineWidth];
    [[UIColor whiteColor] setFill];
    [path fill];
    [[UIColor blackColor] setStroke];
    [path stroke];
}

结果:



如果您希望底部尖端更尖，我会通过将所有绘图剪切到路径来做到这一点，然后将边框绘制两倍厚。一半的边框将被绘制在路径之外并被剪掉，留下一个尖点。在这种情况下，您不必插入边界。

- (void)drawRect:(CGRect)dirtyRect {
    CGFloat lineWidth = 4 * 2;
    CGRect rect = self.bounds;
    CGFloat side = MIN(rect.size.width, rect.size.height);
    CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));

    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat smallRadius = side / 4;
    [path addArcWithCenter:CGPointMake(center.x, center.y - smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:NO];
    [path addArcWithCenter:CGPointMake(center.x, center.y + smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    [path addArcWithCenter:center radius:side / 2 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
    [path closePath];
    [path setLineJoinStyle:kCGLineJoinRound];
    [path addClip];
    [path setLineWidth:lineWidth];
    [[UIColor whiteColor] setFill];
    [path fill];
    [[UIColor blackColor] setStroke];
    [path stroke];
}

结果: