iOS - Changing control points of Quad Curve?

Question

I have drawn a quad curve with the following code, I also drew 3 ellipses, one for left corner, one for right corner and one for control point.

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGContextSaveGState(context);

CGMutablePathRef curve = CGPathCreateMutable();

CGPathMoveToPoint(curve, nil, 5, 40);
CGPathAddQuadCurveToPoint(curve, nil, 30, 20, 55, 40);

CGContextAddPath(context, curve);
CGContextSetStrokeColorWithColor(context,[UIColor whiteColor].CGColor);
CGContextStrokePath(context);

CGContextSaveGState(context);

CGSize sz = self.frame.size;
CGPoint pt = CGPointMake(sz.width/2.0, sz.height/2.0);
CGFloat r = 5;

middleRect_ = CGRectMake(pt.x - r, pt.y - r, r * 2, r * 2);

CGContextAddEllipseInRect(context, middleRect_);
CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextFillPath(context);

CGContextAddEllipseInRect(context, middleRect_);
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextStrokePath(context);

//left side

sz = self.frame.size;
pt = CGPointMake(sz.width/2.0, sz.height/2.0);
r = 5;

leftRect_ = CGRectMake(pt.x - 27, pt.y + 3, r * 2, r * 2);

CGContextAddEllipseInRect(context, leftRect_);
CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextFillPath(context);

CGContextAddEllipseInRect(context, leftRect_);
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextStrokePath(context);

//right side
sz = self.frame.size;
pt = CGPointMake(sz.width/2.0, sz.height/2.0);
r = 5;
rightRect_ = CGRectMake(pt.x + 20, pt.y + 3, r * 2, r * 2);
CGContextAddEllipseInRect(context, rightRect_);
CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextFillPath(context);

CGContextAddEllipseInRect(context, rightRect_);
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextStrokePath(context);

// Cleanup Code
CGColorSpaceRelease(colorSpace);
CGContextRestoreGState(context);

}

as you can can see I am using 3 CGRects to store the positions. Now I want that whenenver I touch and drag an ellipse, it changes the curve. for example if touch the middle ellipse, it changes the control point, if I touch the leftRect, it changes left position, if I touch rightRect, it changes the right position. How to do that? I dont have the reference of these ellipses and curve, how can I do this? Thanks

Answer 1

You need track the touch events to know when the user starts dragging an ellipse. Use UIPanGestureRecognizer for that. You also need variables to keep track of the locations of the ellipses. Whenever user drags an ellipse, redraw everything by calling [self setNeedsDisplay] .

Sorry for the brief answer, but it's a long way from drawing a quad curve to allowing users to control it. The algorithm is pretty straight forward though.