2010-12-21 85 views
7

我试图去掌握Cocoa中的绘图(相当基本)形状。我理解如何创建直线边缘(嘟嘟!),但是当谈到做曲线时,我无法理解哪些输入会产生什么形状的曲线。具体来说,我不知道该方法的参数如何影响形状。难以理解NSBezierPath的curveToPoint:方法

我试图接近在谷歌浏览器选项卡的形状:

​​

而且我正在使用的代码是:

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

我失败的可怕。

看到的,这就是为什么我们不能有好东西:(

My Attempt

谁能给我如何当谈到绘制曲线想一些指点?绘制此路径的一个例子但是真的,它只是了解这些输入到curveToPoint:controlPoint1:controlPoint2:这是阻止我回

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

Getting there

回答

9

当前绘图点(隐含的)和控制点1之间的线是在其开始的曲线的切线。控制点2和“to”点之间的直线是曲线末端的切线。这些对应于您在具有Bézier路径的任何矢量绘图应用程序中看到的两个相切控制的末端。如果你没有使用过,Inkscape是免费的。

+0

+1让我厚实的头脑意识到我应该玩一个图形程序:)我终于得到了一些东西大概是正确的! – d11wtq 2010-12-21 15:02:17

6

下面的图像示出了接受的答案,

Cubic Bézier curve

控制点1是在其开始的曲线的切线。

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

控制点2之间的线的“到”点在曲线

的端部的切线

这是端点和控制点2.

此图片从official Apple documentation之间的虚线。