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

Question

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

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

那行不通。

我有没有方便的方法来代替 addLineToPoint 和 addArcWithCenter

的序列

在自定义视图中

- (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);
}

在Viewcontroller

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

Answer 1

您可以使用以下方法在 beizer 路径中添加圆角。

path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2)  , clockwise: true)

Answer 2

您添加的代码 kCGLineCapRound 工作正常。

kCGLineCapRound 是路径，尝试为路径添加一些 lineWidth。你会看到不同。

path.lineWidth = 50.0

如果需要，您可以将其 strokeColor 设置为与您的填充颜色相同

uibezierpath 上的一个非常好的 post Drawing UIBezierPath on code generated UIView

Answer 3

我猜你想要这个：

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);
}

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

How to add round corner on irregular figure?

core-graphics

objective-c

ios