Tener dificultades para entender curveToPoint de NSBezierPath: método

Question

Estoy tratando de familiarizarme con las formas de dibujo (bastante básicas) en Cocoa. Entiendo cómo crear trayectorias con bordes rectos (¡duh!), Pero cuando se trata de hacer curvas, simplemente no puedo entender qué entradas producirán qué curva en forma. Específicamente, no tengo idea de cómo los argumentos controlPoint1: y controlPoint2: del método influyen en la forma.

Estoy tratando de aproximar la forma de una pestaña en Google Chrome:

Y el código que estoy usando es:

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

estoy fallando terriblemente.

ver, esto es por qué no podemos tener cosas bonitas :(

Puede alguien darme algunos consejos sobre cómo pensar cuando se trata de curvas de dibujo? Un ejemplo que señala este camino Sería genial también, pero en realidad es solo entender estas entradas al curveToPoint:controlPoint1:controlPoint2: que me está frenando.

ACTUALIZACIÓN | Gracias a la respuesta de @ Ahruman finalmente lo comencé a tomar forma. No es 100% (falta las curvas en la parte inferior) esquinas, pero en realidad es una forma simétrica al menos ahora :)

Answer 1

La línea entre el punto de dibujo actual (implícita) y el punto 1 de control es la tangente de la curva en su comienzo. La línea entre el punto de control 2 y el punto "a" es la tangente al final de la curva. Estos corresponden a los extremos de los dos controles tangentes que se ven en cualquier aplicación de dibujo vectorial con rutas Bézier. Si no has usado uno, Inkscape es gratis.

Answer 2

La imagen de abajo ilustra la respuesta aceptada,

punto 1 de control es la tangente de la curva en su comienzo.

Esta sería la línea de puntos desde el punto de inicio para el control del punto 1 en la curva Bézier

La línea entre el punto de control 2 y la “a” punto es la tangente en el extremo de la curva

Esta es la línea de puntos entre puntos finales y Puntos de control 2.

Esta imagen es de official Apple documentation.