Draw line between two points and drag/curve that line using finger in iOS?

Question

I'm trying to add line between two points based on user touch(start point will be user's first touch & end point will be user's second touch on the view).I was able to draw it using below code.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    if ([touch tapCount] == 2)
    {
        NSLog(@"touch count 2");
        return;
    }
    if(isOdd)//View already has user's start point
    {
        nextPoint = [touch locationInView:self.view];
        point2 = nextPoint;
        //nextPoint.y -= 20;
        [self drawLineFromPoint:currentPoint toPoint:nextPoint];
        currentPoint = nextPoint;
        NSLog(@"x:%f,y:%f",currentPoint.x,currentPoint.y);
        isOdd = YES;
    }
    else
    {
        currentPoint = [touch locationInView:self.view];
        point1 = currentPoint;
        NSLog(@"x:%f,y:%f",currentPoint.x,currentPoint.y);
        isOdd = YES;
    }
}
-(void)drawLineFromPoint:(CGPoint)start toPoint:(CGPoint)end
{
    UIBezierPath *path = [UIBezierPath new];
    [path moveToPoint:start];
    [path addLineToPoint:end];
    CAShapeLayer *shapeLayer = [CAShapeLayer new];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = [UIColor greenColor].CGColor;
    shapeLayer.lineWidth = 3.0;
    [self.myView.layer addSublayer:shapeLayer];
}

Now my question is, Is it possible to curve that line when user tries to drag/move that line using finger?

Answer 1

If your question was to curve the line which was already drawn, then you can try the following:

As you would know the starting and ending points of the line, you can redraw a curve as the finger moves using

- addQuadCurveToPoint:controlPoint:

function of UIBezierPath, where the control point would be the current touch point during the move. You'll have to move to the start point before calling this function using

- moveToPoint:

and make the end point as the destination point for the curve function mentioned above.

Answer 2

Drawing a straight line between Point A(startingPoint) and Point B(endingPoint) using CAShapeLayer.

@interface ViewController()
{
   CGFloat startingPoint,endingPoint;
}
@end

@implementation ViewController()

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        UITouch *touch = [[event allTouches] anyObject];
        //Take the first point A from touch began
        startingPoint = [touch locationInView:baseHolderView];

    }
    - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        UITouch *touch = [touches anyObject];
        endingPoint = [touch locationInView:baseHolderView];
        //Take the Second point b from touch Ended
        [self makeLineLayer:baseHolderView.layer lineFromPointA:startingPoint toPointB:endingPoint];
    }

    -(void)makeLineLayer:(CALayer *)layer lineFromPointA:(CGPoint)pointA toPointB:(CGPoint)pointB
    {
        CAShapeLayer *line = [CAShapeLayer layer];
        UIBezierPath *linePath=[UIBezierPath bezierPath];
        [linePath moveToPoint: pointA];
        [linePath addLineToPoint:pointB];
        line.path=linePath.CGPath;
        line.fillColor = nil;
        line.opacity = 2.0;
        line.strokeColor = [UIColor blackColor].CGColor;
        [layer addSublayer:line];
    }

@end