UIBezierPath- Both direction Arrow with Curve

Question

I am trying to make an arrow which have two side arrow mark and in middle arc curve

But Now i have used mayOff_gist and able to make single line arrow with one side .

code-

//.h

@interface UIBezierPath (arrow)


+ (UIBezierPath *)dqd_bezierPathWithArrowFromPoint:(CGPoint)startPoint
                                       toPoint:(CGPoint)endPoint
                                     tailWidth:(CGFloat)tailWidth
                                     headWidth:(CGFloat)headWidth
                                    headLength:(CGFloat)headLength;


@end

//.m

#define kArrowPointCount 7

@implementation UIBezierPath (arrow)


+ (UIBezierPath *)dqd_bezierPathWithArrowFromPoint:(CGPoint)startPoint
                                       toPoint:(CGPoint)endPoint
                                     tailWidth:(CGFloat)tailWidth
                                     headWidth:(CGFloat)headWidth
                                    headLength:(CGFloat)headLength {
CGFloat length = hypotf(endPoint.x - startPoint.x, endPoint.y - startPoint.y);

CGPoint points[kArrowPointCount];
[self dqd_getAxisAlignedArrowPoints:points
                          forLength:length
                          tailWidth:tailWidth
                          headWidth:headWidth
                         headLength:headLength];

CGAffineTransform transform = [self dqd_transformForStartPoint:startPoint
                                                      endPoint:endPoint
                                                        length:length];

CGMutablePathRef cgPath = CGPathCreateMutable();
CGPathAddLines(cgPath, &transform, points, sizeof points / sizeof *points);
CGPathCloseSubpath(cgPath);

UIBezierPath *uiPath = [UIBezierPath bezierPathWithCGPath:cgPath];
CGPathRelease(cgPath);
return uiPath;
}

+ (void)dqd_getAxisAlignedArrowPoints:(CGPoint[kArrowPointCount])points
                        forLength:(CGFloat)length
                        tailWidth:(CGFloat)tailWidth
                        headWidth:(CGFloat)headWidth
                       headLength:(CGFloat)headLength {
CGFloat tailLength = length - headLength;
points[0] = CGPointMake(0, tailWidth / 2);
points[1] = CGPointMake(tailLength, tailWidth / 2);
points[2] = CGPointMake(tailLength, headWidth / 2);
points[3] = CGPointMake(length, 0);
points[4] = CGPointMake(tailLength, -headWidth / 2);
points[5] = CGPointMake(tailLength, -tailWidth / 2);
points[6] = CGPointMake(0, -tailWidth / 2);
}

+ (CGAffineTransform)dqd_transformForStartPoint:(CGPoint)startPoint
                                   endPoint:(CGPoint)endPoint
                                     length:(CGFloat)length {
CGFloat cosine = (endPoint.x - startPoint.x) / length;
CGFloat sine = (endPoint.y - startPoint.y) / length;
return (CGAffineTransform){ cosine, sine, -sine, cosine, startPoint.x, startPoint.y };
}

and above code gives output

Answer 1

The basic idea in drawing arrowheads on a curved path is to figure out the tangent of the end of the curve (e.g. the slope between the point and its control point), and then figure out how to offset the arrow head. For example, consider this extension to UIBezierPath:

@interface UIBezierPath (ArrowHead)

/**
 Function to add an arrow from the currentPoint.

 @param point         The point of the arrow
 @param controlPoint  The point from which the arrow is aligned. Typically, this will be the
                      control point for the previous quad/cubic bezier, or if dealing with a
                      line, the starting point.
 @param width         The width of the arrow (distance from the line).
 @param height        The height of the arrow (distance from the start point).
 @param isOpen        Whether the arrowhead is open or closed.
 */

- (void)addArrowFrom:(CGPoint)point
        controlPoint:(CGPoint)controlPoint
               width:(CGFloat)width
              height:(CGFloat)height
              isOpen:(BOOL)isOpen;

@end

And

@implementation UIBezierPath (ArrowHead)

- (void)addArrowFrom:(CGPoint)point
        controlPoint:(CGPoint)controlPoint
               width:(CGFloat)width
              height:(CGFloat)height
              isOpen:(BOOL)isOpen {
    CGFloat angle = atan2f(point.y - controlPoint.y, point.x - controlPoint.x);
    CGFloat angleAdjustment = atan2f(width, -height);
    CGFloat distance = hypotf(width, height);

    [self moveToPoint:point];
    [self addLineToPoint:[self calculatePointFromPoint:point angle:angle + angleAdjustment distance:distance]]; // to the right
    if (isOpen) [self addLineToPoint:point];                                                                    // move back to the point
    [self addLineToPoint:[self calculatePointFromPoint:point angle:angle - angleAdjustment distance:distance]]; // to the left
    if (isOpen) {
        [self addLineToPoint:point]; // straight ahead
    } else {
        [self closePath];
    }
}

/**
 Private function for calculating a point at a particular angle from some point.

 @param point       The starting point.
 @param angle       The angle from that point.
 @param distance    The distance from that point.
 @return            The resulting CGPoint.
 */

- (CGPoint)calculatePointFromPoint:(CGPoint)point angle:(CGFloat)angle distance:(CGFloat)distance {
    return CGPointMake(point.x + cosf(angle) * distance, point.y + sinf(angle) * distance);
}

@end

You can then render a path like so:

@interface ViewController ()
@property (nonatomic, strong) NSMutableArray<CAShapeLayer *> *shapeLayers;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.shapeLayers = [NSMutableArray array];
}

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    [self replaceShapeLayers];
}

- (void)replaceShapeLayers {
    // remove any old shape layers

    for (CAShapeLayer *shapeLayer in self.shapeLayers) {
        [shapeLayer removeFromSuperlayer];
    }
    [self.shapeLayers removeAllObjects];

    [self createOpenArrowPath];
}

/**
 Create open arrowhead path

 Note, because it's open arrowheads, we need rounded lineJoin and lineCap.
 And because both the curve and arrow head have no fill, we can use a single path for
 everything.
 */

- (void)createOpenArrowPath {
    // create new curve shape layer

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blueColor].CGColor;
    shapeLayer.lineWidth = 10;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;

    [self.view.layer addSublayer:shapeLayer];

    [self.shapeLayers addObject:shapeLayer];

    // now configure curve shape layer

    CGPoint start = CGPointMake(self.view.bounds.size.width * 0.1, self.view.bounds.size.height / 2.0);
    CGPoint end = CGPointMake(self.view.bounds.size.width * 0.9, self.view.bounds.size.height / 2.0);
    CGPoint controlPoint = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height / 3.0);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArrowFrom:start controlPoint:controlPoint width:30 height:50 isOpen:true];
    [path addQuadCurveToPoint:end controlPoint:controlPoint];
    [path addArrowFrom:end controlPoint:controlPoint width:30 height:50 isOpen: true];

    shapeLayer.path = path.CGPath;
}

/**
 Create closed arrowhead path

 Note, because it's closed arrowheads, we need separate paths for the curve (rounded endpoints, no fill)
 and the arrowheads (mitred joins, but with fill).
 */

- (void)createClosedArrowPath {
    // create new curve shape layer (with no fill and rounded corners)

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blueColor].CGColor;
    shapeLayer.lineWidth = 10;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;

    [self.view.layer addSublayer:shapeLayer];

    [self.shapeLayers addObject:shapeLayer];

    // now configure curve shape layer

    CGPoint start = CGPointMake(self.view.bounds.size.width * 0.1, self.view.bounds.size.height / 2.0);
    CGPoint end = CGPointMake(self.view.bounds.size.width * 0.9, self.view.bounds.size.height / 2.0);
    CGPoint controlPoint = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height / 3.0);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:start];
    [path addQuadCurveToPoint:end controlPoint:controlPoint];

    shapeLayer.path = path.CGPath;

    // create arrow heads shape layer

    shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    shapeLayer.strokeColor = [UIColor blueColor].CGColor;
    shapeLayer.lineWidth = 10;
    shapeLayer.lineJoin = kCALineJoinMiter;
    shapeLayer.lineCap = kCALineCapButt;

    [self.view.layer addSublayer:shapeLayer];

    [self.shapeLayers addObject:shapeLayer];

    // now configure curve shape layer

    path = [UIBezierPath bezierPath];
    [path addArrowFrom:start controlPoint:controlPoint width:30 height:50 isOpen:false];
    [path addArrowFrom:end controlPoint:controlPoint width:30 height:50 isOpen:false];

    shapeLayer.path = path.CGPath;

}

@end

And that yields:

Or

---

If you want to make this dynamic for any two points, just do a little trigonometry to figure out the right control point. For example, this will use a control point that is an angle that is π / 8 offset from the angle between the starting and ending points:

- (void)createOpenArrowPathFrom:(CGPoint)start to:(CGPoint)end {
    // create new curve shape layer

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blueColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;

    [self.view.layer addSublayer:shapeLayer];

    [self.shapeLayers addObject:shapeLayer];

    // now configure curve shape layer

    CGFloat angle = atan2f(end.y - start.y, end.x - start.x);
    CGFloat incrementalAngle = M_PI_4 / 2.0;
    angle -= incrementalAngle;
    CGFloat distance = hypotf(end.y - start.y, end.x - start.x) / 2.0 / cosf(-incrementalAngle);

    CGPoint controlPoint = CGPointMake(start.x + distance * cosf(angle), start.y + distance * sinf(angle));

    CGFloat percent = MIN(1.0, distance / 100.0);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArrowFrom:start controlPoint:controlPoint width:30.0 * percent height:50.0 * percent isOpen:true];
    [path addQuadCurveToPoint:end controlPoint:controlPoint];
    [path addArrowFrom:end controlPoint:controlPoint width:30 * percent height:50 * percent isOpen: true];

    shapeLayer.path = path.CGPath;
}

That yields:

Clearly you can play around with this as you see fit (do it for the solid arrow, etc.), but it illustrates how to determine a plausible control point yielding a modest curve given two points.