很难理解 NSBezierPath 的 curveToPoint: 方法答案

【问题标题】：Having a hard time understanding NSBezierPath's curveToPoint: method很难理解 NSBezierPath 的 curveToPoint: 方法
【发布时间】：2010-12-21 13:27:04
【问题描述】：

我正在尝试在 Cocoa 中绘制（相当基本的）形状。我了解如何创建具有直边的路径（呃！），但是在做曲线时，我无法理解哪些输入会产生什么形状的曲线。具体来说，我不知道该方法的 controlPoint1: 和 controlPoint2: 参数如何影响形状。

我正在尝试近似谷歌浏览器中标签的形状：

我使用的代码是：

-(void)drawRect:(NSRect)dirtyRect {
    NSSize size = [self bounds].size;

    CGFloat height = size.height;
    CGFloat width = size.width;

    NSBezierPath *path = [NSBezierPath bezierPath];
    [path setLineWidth:1];

    [path moveToPoint:NSMakePoint(0, 0)];

    [path curveToPoint:NSMakePoint(width * 0.1, height)
         controlPoint1:NSMakePoint(width * 0.05, height)
         controlPoint2:NSMakePoint(width * 0.03, height * 0.05)];

    [path lineToPoint:NSMakePoint(width * 0.9, height)];

    [path curveToPoint:NSMakePoint(width, 0)
         controlPoint1:NSMakePoint(width * 0.95, height)
         controlPoint2:NSMakePoint(width * 0.97, height * 0.05)];

    [path closePath];

    [[NSColor colorWithCalibratedWhite:0.98 alpha:1] set];
    [path fill];

    [[NSColor colorWithCalibratedWhite:0.6 alpha:1] set];
    [path stroke];
}

我失败得很厉害。

看，这就是为什么我们不能拥有美好的东西:(

谁能给我一些关于在绘制曲线时如何思考的建议？绘制这条路径的示例也很好，但实际上只是理解这些对curveToPoint:controlPoint1:controlPoint2: 的输入让我退缩了。

更新 |感谢@Ahruman 的回答，我终于开始成型了。它不是 100%（缺少底角的曲线，但至少现在它实际上是一个对称的形状 :)

【问题讨论】：

标签： objective-c cocoa macos quartz-graphics

【解决方案1】：

当前绘图点（隐式）和控制点 1 之间的线是曲线起点处的切线。控制点 2 和“到”点之间的线是曲线末端的切线。这些对应于您在任何带有贝塞尔路径的矢量绘图应用程序中看到的两个切线控件的末端。如果您还没有使用过，Inkscape 是免费的。

【讨论】：

+1 让我的脑袋意识到我应该玩图形程序 :) 我终于找到了一些大致正确的东西！

【解决方案2】：

下图说明了接受的答案，

控制点 1 是曲线起点的切线。

这将是贝塞尔曲线中从起点到控制点 1 的虚线

控制点 2 和“到”点之间的线是曲线末端的切线

这是端点和控制点 2 之间的虚线。

此图片来自official Apple documentation。

【讨论】：