计算 addCurveToPoint 控制点

Question

我正在使用CoreGraphics画圆角矩形，我熟悉CG API 准备画圆角矩形，但我不想用它，因为矩形不是一个完整的-均匀的圆角矩形，一部分是圆角矩形，其他部分是一组相连的路径，例如，左上角和右上角是一个圆角矩形边，但是，底部边是一组连接的贝塞尔曲线路径。

我的问题是，如果我想把整个形状画成贝塞尔曲线，我应该如何计算addCurveToPoint中的控制点作为角点？我知道点的半径和坐标（也基于半径）。

（更新）

I have a sample code, I am trying to understand the math behind it:

UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addCurveToPoint:CGPointMake(8.01, 0) controlPoint1:CGPointMake(0, 3.58) controlPoint2:CGPointMake(3.59, 0)];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addCurveToPoint:CGPointMake(224, 16.01) controlPoint1:CGPointMake(216.84, 0) controlPoint2:CGPointMake(224, 7.16)];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addCurveToPoint:CGPointMake(192, 207) controlPoint1:CGPointMake(224, 192.67) controlPoint2:CGPointMake(209.67, 207)];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addCurveToPoint:CGPointMake(0, 142.99) controlPoint1:CGPointMake(28.65, 207) controlPoint2:CGPointMake(0, 178.35)];
[rectangle addLineToPoint:CGPointMake(0, 8)];
[rectangle closePath];

左上角、右上角、右下角和左下角的圆角半径分别为 8、16、32 和 64

谢谢

Answer 1

我假设您想为圆角添加 90 度弧。使用 addArc 而不是 addCurveToPoint.

在Swift 3:

var path = UIBezierPath()

...

let center = CGPoint(x: topLeft.x + width - radius, y: topLeft.y)
path.addArc(withCenter: center, radius: radius, startAngle: CGFloat.pi, endAngle: CGFloat.pi * CGFloat(1.5), clockwise: true)

当然，您的参数会有所不同。

更新

根据您的代码，它应该如下所示：

UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addArcWithCenter:CGPointMake(8, 8) radius:8 startAngle:M_PI endAngle:M_PI*1.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addArcWithCenter:CGPointMake(208, 16) radius:16 startAngle:M_PI*1.5 endAngle:0 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addArcWithCenter:CGPointMake(208, 175) radius:32 startAngle:0 endAngle:M_PI*0.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addArcWithCenter:CGPointMake(64, 175) radius:64 startAngle:M_PI*0.5 endAngle:M_PI clockwise:YES];
[rectangle closePath];

Answer 2

根据@Codo 的回答，这是最终的解决方案：

UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addArcWithCenter:CGPointMake(8, 8) radius:8 startAngle:M_PI endAngle:M_PI*1.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addArcWithCenter:CGPointMake(208, 16) radius:16 startAngle:M_PI*1.5 endAngle:0 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addArcWithCenter:CGPointMake(192, 175) radius:32 startAngle:0 endAngle:M_PI*0.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addArcWithCenter:CGPointMake(64, 143) radius:64 startAngle:M_PI*0.5 endAngle:M_PI clockwise:YES];
[rectangle addLineToPoint:CGPointMake(0, 8)];
[rectangle closePath];

计算 addCurveToPoint 控制点

Calculating addCurveToPoint control points

core-graphics

ios