Having a difficult understanding of NSBezierPath curveToPoint: method

Question

I am trying to cope with drawing (fairly basic) shapes in Cocoa. I understand how to create paths with straight edges (duh!), But when it comes to curves, I just can't figure out which inputs will create what formed the curve. In particular, I do not know how the arguments of the controlPoint1: and controlPoint2: methods affect the form.

I am trying to approximate the tab form in Google Chrome:

And the code I use:

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

I fail.

Look, this is why we cannot have pleasant things :(

Can someone give me some guidance on how to think when it comes to drawing curves? The example that draws this path will also be great, but in fact it just understands these inputs for curveToPoint:controlPoint1:controlPoint2: that hold me.

UPDATE | Thanks to @Ahruman's answer, I finally got it to start forming. This is not 100% (there are no curves at the lower corners, but in fact it is a symmetrical shape, at least for now :)

Answer 1

The line between the current point in the drawing (implicit) and control point 1 is tangent to the curve at its beginning. The line between control point 2 and the to point is tangent at the end of the curve. They correspond to the ends of the two tangent controls that you see in any vector drawing application using Bezier paths. If you have not used it, Inkscape is free.

Answer 2

The image below illustrates the accepted answer.

control point 1 is tangent to the curve at its beginning.

This will be a dashed line from the start point to control point 1 in the Bezier curve.

The line between control point 2 and the to point is tangent at the end of the curve

This is a dashed line between the end point and control point 2.

This image is from Apple official documentation .