如何绘制四点曲线

Question

I can draw a curve using bezier path, but instead of specifying two control points, I want to specify two points that the path go through it, shown as following

the startPoint is (10,90), end point is (70,70), and the curve pass (20, 50), which is the peak point. and (60,100). Please let me know how to draw it.

Answer 1

From "Bézier curve" article in Wikipedia:

Any series of any 4 distinct points can be converted to a cubic Bézier curve that goes through all 4 points in order. Given the starting and ending point of some cubic Bézier curve, and any two other distinct points in sequence along that curve, the control points for the original Bézier curve can be recovered.[3]

and at the end follows link to http://people.sc.fsu.edu/~jburkardt/html/bezier_interpolation.html

Answer 2

You can use UIBezierPath 's addCurveToPoint:controlPoint1:controlPoint2: method.

CGPoint startPt, endPt, cPt1, cPt2;
// init points here
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPt];
[path addCurveToPoint:endPt controlPoint1:cPt1 controlPoint2:cPt2];

Answer 3

Assuming we have four points D0(x0,y0) , D1(x1,y1) , D2(x2,y2) , D2(x3,y3) . We have to find Bezier cubic spline P0-P1-P2-P3 passing through D0 , D1 , D2 and D3 .

Obviously,

P0 = D0
P3 = D2

Then there are infinite number of Bezier splines passing through point D1 and point D2 defined by equations

P2 = (D1 - (1-t1)^3 * P0 - t1^3 * P3) / (3*(1-t1)*t1^2) -
     (1-t1) * P1/t1;
P2 = (D2 - (1-t2)^3 * P0 - t2^3 * P3) / (3*(1-t2)*t2^2) -
     (1-t2) * P1/t2;

where t1 is Bezier curve parameter corresponding to point D1 and t2 is corresponding parameter of D2 .

Solving this system of equations will give us P1

P1 = t2*(D1 - (1-t1)^3 * P0 - t1^3 * P3) / (3*(1-t1)*t1*(t2-t1)) -
     t1*(D2 - (1-t2)^3 * P0 - t2^3 * P3) / (3*(1-t2)*t2*(t2-t1));

We still need to define t1 and t2 . Their values can be pretty much anything as long as they are not equal and not equal to 1 . One obvious choice is 0.25 and 0.75 .

Here is a resulting curve for a set of random input values

Then P1 and P2 can be used as controlPoint1 and controlPoint2 in UIBezierPath's addCurveToPoint:controlPoint1:controlPoint2 method.