UIBezierPath manipulation on iOS

Question

I'm starting out with a straight line and I would like the user to be able to touch and drag the line so that it curves. Effectively, they would have the ability to manipulate the line into a wave shape. I'm not sure of the easiest way of achieving this technically.

I had started by creating an array of UIBezierPaths of cubic curves with the intention of manipulating the control points - but it appears that it is not possible to alter the control points of UIBezierPaths once they have been drawn?

Any suggestions as to the simplest technical approach appreciated.

Answer 1

You can draw a quadCurve (one control point Bezier curve) in drawRect using variables as control points, and then update the control points in the touchesBegan method as follows. Note that you need to redraw with setNeedsDisplay

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    controlPoint = [[touches anyObject] locationInView:self];
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 1.0);

    CGContextMoveToPoint(context, 0, 320);
    CGContextAddQuadCurveToPoint(context, controlPoint.x, controlPoint.y, 320, 200);
    CGContextStrokePath(context);

}

If you have multiple control points, then some visual elements and extra logic is required in the touchesMoved method... e