Question

I have UIBezierPath in the application. When the finger touch on the path is recognized i want to subdivide that curve and store that two curves into two different objects. So touch co-ordinates will work as end-point for one curve and start-point for second curve.

Again if i touch on any of this curve, that curve will subdivide into two other curves and so on.

I searched for this a lot. But could not find any good solution.

Also I do not have idea if there is any other way to do this. Any help would be greatly appreciated.
Thanks

Answer 1

You can do this with the de Casteljau algorithm. If you’re really into the maths of it check out the Wikipedia page here, but if you’re not that into the maths it will probably confuse you more than anything when it’s actually quite simple…

1. Calculate the parameterized value along the curve (between 0.0 and 1.0) of the touch. To do this you can calculate a set of points at regular intervals (0.1, 0.2, 0.3 etc.) and then find the two closest points to your touch points and repeat the parameterization between these points if you want more accuracy (0.21, 0.22, 0.23, etc.). This will result in a number between 0.0 and 1.0 along the curve segment representing where you touched.
2. This bit is difficult to explain in text, but there’s a good visualization on this page about half-way down under the heading Subdividing a Bezier curve. Use the slider under the diagram to see how it works, here’s my textual explanation: You need to subdivide the straight lines between the control points of your curve segment proportional to the parameterized value you calculated in step 1. So if you calculated 0.4, you have four points (A, B, C, D) plus the split-point on the curve closest to your touch at 0.4 along the curve, we’ll call this split-point point S:
   • Calculate a temporary point T which is 0.4 along the line B→C
   • Let point A1 be equal to point A
   • Calculate point B1 which is 0.4 along the line A→B
   • Calculate point C1 which is 0.4 along the line B1→T
   • Let point D1 be equal to the split point S
   • Let point D2 be equal to point D
   • Calculate point C2 which is 0.4 along the line C→D
   • Calculate point B2 which is 0.4 along the line T→C2
   • Let point A2 be equal to the split point S

Now you have two new Bezier curves, the first using control points A1, B1, C1, D1 and the second using A2, B2, C2, D2.