Трудно разобраться в методе создания кривой в NSBezierPath. - PullRequest
Новая
       1

Трудно разобраться в методе создания кривой в NSBezierPath.

7 голосов
/ 21 декабря 2010

Я пытаюсь справиться с рисованием (довольно базовых) фигур в Какао.Я понимаю, как создавать пути с прямыми краями (дух!), Но когда дело доходит до создания кривых, я просто не могу понять, какие входные данные будут давать кривую определенной формы.В частности, я понятия не имею, как аргументы controlPoint1: и controlPoint2: метода влияют на форму.

Я пытаюсь приблизить форму вкладки в Google Chrome:

Google Chrome Tab

И код, который я использую: 

-(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:, которое сдерживает меня.

ОБНОВЛЕНИЕ | Благодаря ответу @ Арумана я, наконец, получил его, чтобы начать обретать форму.симметричная форма по крайней мере сейчас:)

Getting there

Ответы [ 2 ]

9 голосов
/ 21 декабря 2010

Линия между текущей точкой рисования (неявной) и контрольной точкой 1 является тангенсом кривой в ее начале. Линия между контрольной точкой 2 и точкой «до» является касательной в конце кривой. Они соответствуют концам двух элементов управления касательной, которые вы видите в любом приложении векторного рисования с путями Безье. Если вы не использовали его, Inkscape бесплатен.

6 голосов
/ 15 мая 2014

Изображение ниже иллюстрирует принятый ответ,

Cubic Bézier curve

контрольная точка 1 - тангенс кривой в ее начале.

Это будет пунктирная линия от начальной точки до контрольной точки 1 на кривой Безье

Линия между контрольной точкой 2 и точкой «до» является касательной в конце кривой

Это пунктирная линия между конечной точкой и контрольной точкой 2.

Это изображение из официальной документации Apple .

...