StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It is fairly easy to draw the control points and allow the user to drag them around. Unfortunately, the curve does not pass through all the control points, so the experience does not quite match what you're suggesting.</p> <p>To do what you're suggesting, you first need to answer the question "is the user touching the curve?" This is the same as the question "is a given point within a certain distance of the curve." That is not a trivial question, but it can be calculated. Probably the simplest approach is to just calculate X points along the curve (where X is sufficiently high to give you reasonable precision), and check the distance for each. In principle, you could also take the derivative of the distance equation and solve it for its zeros, but this requires iteration. In my experience you can calculate the needed 1000 or so distances quickly enough (even on an iPad 1) that it may not be worth the extra complexity. </p> <p>Once you find that the user is in fact touching the curve, it's easy to figure out which control point is closest. The hard thing at this point is deciding what to do about it. Some options:</p> <ul> <li>Move the closest control point in the direction that the user is moving. You may need to do multiple calculations until you find a new curve that passes through the touch point. This is the simplest approach and probably where I'd start.</li> <li>You could subdivide the curve at the touched point and move the newly created endpoints. (See <a href="http://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm" rel="noreferrer">De Casteljau's</a> algorithm for this.)This will tend to create sharp corners unless you adjust the other control points to create matched slopes. This allows for more arbitrary curves, but it could become very hard to know what the user really wanted. You'd also almost certainly need to apply <a href="http://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm" rel="noreferrer">Ramer-Douglas-Peucker</a> to keep your number of curves from exploding.</li> </ul> <p>I'm currently quite interested in Bézier curve problems in Objective-C. You may be interested in my <a href="http://robnapier.net/blog/equations-matrices-accelerate-607" rel="noreferrer">first post on the subject</a>. My initial work in this area is available on <a href="https://github.com/rnapier/ios5ptl/blob/master/ch18/CurvyText/CurvyText/CurvyTextView.m" rel="noreferrer">GitHub</a> in the <a href="http://iosptl.com" rel="noreferrer">iOS:PTL</a> sample code. Hopefully I'll have another post up this week. Your particular problem is interesting, so I may see what I can build around that.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload