ios - 如何在不规则图形上添加圆角？

Question

我想绕过这个的每个角落。我使用 UIBezierPath 来绘制和设置

path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;

那行不通。

我有一个方便的方法来代替一系列的 addLineToPoint 和 addArcWithCenter

在自定义 View 中

- (void)drawRect:(CGRect)rect {

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(150, 100)];
    [path addLineToPoint:CGPointMake(150, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];
    [path addLineToPoint:CGPointMake(200, 200)];
    [path addLineToPoint:CGPointMake(250, 200)];
    [path addLineToPoint:CGPointMake(250, 250)];
    [path addLineToPoint:CGPointMake(100, 250)];
    [path closePath];
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetFillColorWithColor(context, UIColor.greenColor.CGColor);
    CGContextAddPath(context, path.CGPath);
    CGContextFillPath(context);
    CGContextRestoreGState(context);
}

在 View Controller 中

- (void)viewDidLoad {
    [super viewDidLoad];
    testvvv *test = [[testvvv alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:test];
}

Answer 1

我猜你想要这个:

UIBezierPath 上没有用于圆角的 Core Graphics 函数。它们是 CGContextAddArcToPoint 和 CGPathAddArcToPoint。我将解释它们的工作原理。

首先让我们考虑如何绘制两条线在尖角处相交。路径首次初始化时，其“当前点”位于原点:

您使用 CGPathMoveToPoint 移动到第一行的开头 (x0, y0):

然后使用CGPathAddLineToPoint 绘制第一条线，在拐角处结束于(x1, y1):

最后，您再次使用 CGPathAddLineToPoint 将第二条线绘制到 (x2, y2):

现在让我们使用 CGPathAddArcToPoint 代替圆角。倒回到刚刚使用 CGPathMoveToPoint 移动到第一行的开头:

CGPathAddArcToPoint 需要两个 点:拐角处的点(不会到达，因为它将绕过拐角)和形状中的下一个点角落。因此，您同时传递了 (x1,y1)(角)和 (x2,y2)(下一行的末尾)。您还传递给它角的半径:

请注意，CGPathAddArcToPoint 为您绘制了第一条线，并绘制了形成圆角的弧，并将当前点留在该弧的末端。因此，您随后使用 CGPathAddLineToPoint 绘制第二条线:

好的，这解释了(我希望)CGPathAddArcToPoint 是如何工作的。 CGContextAddArcToPoint 以相同的方式工作，但在上下文的路径上运行。

要将此应用于您的楼梯形状，您需要使用 CG*AddArcToPoint 函数来绘制每个角。由于您有一个封闭的形状并且不需要尖角，因此根本不需要使用 CG*AddLineToPoint。您可以使用 arc 函数绘制每条线以及圆角。

需要注意的一件事是开始形状的位置。你不能从拐角处开始，因为那样的话你会从拐角处得到一条直线。相反，最简单的方法是从其中一条线的中点开始，远离任何角落。

此外，由于您是在 drawRect: 中执行此操作，因此您可以只使用上下文的路径而不是创建单独的 UIBezierPath 或 CGPath 对象。这是我用来绘制上面结果的代码:

- (void)drawRect:(CGRect)rect {
    CGPoint p[] = {
        {100, 100},
        {150, 100},
        {150, 150},
        {200, 150},
        {200, 200},
        {250, 200},
        {250, 250},
        {100, 250},
    };
    size_t count = (sizeof p) / (sizeof p[0]);
    CGPoint pLast = p[count - 1];

    CGContextRef gc = UIGraphicsGetCurrentContext();

    // Start at the midpoint of one of the lines.
    CGContextMoveToPoint(gc, 0.5 * (pLast.x + p[0].x), 0.5 * (pLast.y + p[0].y));

    for (size_t i = 1; i < count; ++i) {
        CGContextAddArcToPoint(gc, p[i-1].x, p[i-1].y, p[i].x, p[i].y, 10);
    }
    CGContextAddArcToPoint(gc, pLast.x, pLast.y, p[0].x, p[0].y, 10);

    // Connect the last corner's arc to the starting point.
    CGContextClosePath(gc);

    [UIColor.greenColor setFill];
    CGContextFillPath(gc);
}