Search code examples
objective-cioscocoa-touchcore-graphics

How to find an arrow tip points given origin and end point of a line


Consider you have a line with start point (x1,y1) and end point (x2,y2).

In order to draw an arrow cap to the line (in objective-c), I need to find the points of the arrow (x3,y3,x4,y4) given the angle of the arrow (45 degrees), and the length of the arrow tips (h).

So given x1,y1,x2,y2,h,alpha whats x3,y3,x4,y4?

Added an image explaining the question.

If the answer can be in objective-c (using UIBezierpath and CGPoint) it will be much appreciated.

Thanks!arrow drawing


Solution

  • #import <math.h>
    #import <UIKit/UIKit.h>
    #import <CoreGraphics/CoreGraphics.h>
    
    float phi = atan2(y2 - y1, x2 - x1); // substitute x1, x2, y1, y2 as needed
    float tip1angle = phi - M_PI / 4; // -45°
    float tip2angle = phi + M_PI / 4; // +45°
    
    float x3 = x2 - h * cos(tip1angle); // substitute h here and for the following 3 places
    float x4 = x2 - h * cos(tip2angle);
    float y3 = y2 -  h * sin(tip1angle);
    float y4 = y2 -  h * sin(tip2angle);
    
    CGPoint arrowStartPoint = CGPointMake(x1, y1);
    CGPoint arrowEndPoint = CGPointMake(x2, y2);
    CGPoint arrowTip1EndPoint = CGPointMake(x3, y3);
    CGPoint arrowTip2EndPoint = CGPointMake(x4, y4);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext(); // assuming an UIView subclass
    [[UIColor redColor] set];
    CGContextMoveToPoint(ctx, arrowStartPoint.x, arrowStartPoint.y);
    CGContextAddLineToPoint(ctx, arrowEndPoint.x, arrowEndPoint.y);
    CGContextAddLineToPoint(ctx, arrowTip1EndPoint.x, arrowTip1EndPoint.y);
    CGContextMoveToPoint(ctx, arrowEndPoint.x, arrowEndPoint.y);
    CGContextAddLineToPoint(ctx, arrowTip2EndPoint.x, arrowTip2EndPoint.y);
    

    I hope this helps :)