Draw bullet arrow in Core Graphics

Question

I don't want to reinvent the wheel unless absolutely necessary, so I wanted to see how I would go about drawing an arrow like this with Core Graphics:

Does anyone know how I can get started with this? This is what I have so far, but it draws a regular triangle instead of a bracket shape:

    CGPoint origin = CGPointMake(100, 20);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:origin];
    [path addLineToPoint:CGPointMake(origin.x-10, origin.y-20)];
    [path addLineToPoint:CGPointMake(origin.x-10, origin.y+20)];
    [[UIColor redColor] set];
    [path fill];

Answer 1

If you draw with strokes as suggested by @NSGod, you need to move to the upper or lower tip, and then line to the arrow head, then line to the lower or upper tip. If you want a 45 degree angle like the one you drew, the amount you add to or subtract from the coordinates should be equal.

You will also need to set the line width for the path. This will need to be proportional to the size.

CGPoint origin = CGPointMake(100, 20);

UIBezierPath *path = [UIBezierPath bezierPath];
// Upper tip
[path moveToPoint:CGPointMake(origin.x+20, origin.y-20)];
// Arrow head
[path addLineToPoint:CGPointMake(origin.x, origin.y)];
// Lower tip
[path addLineToPoint:CGPointMake(origin.x+20, origin.y+20)];

[[UIColor redColor] set];
// The line thickness needs to be proportional to the distance from the arrow head to the tips.  Making it half seems about right.
[path setLineWidth:10];
[path stroke];

The result is a shape like this.

If you want to fill, not stroke - which may be necessary if you want to outline your arrow - you will need to plot out 6 points and then close the path.