Curve textfield on an Arcing Path

[sprinklez]

What I'm looking to do (and I know this is a flex example that I'm about to link to) is this essentially, in a nutshell :

http://blog.tsclausing.com/post/40#more-40

I need a user to be able to enter text into a Textfield and have it put into an Arc form like that. Although I don't need the sliders like they have in that example. All I'd really need is a checkbox to turn curved text on or off...

I've been at this for days and I guess it's just a bit over my head with all the Math that seems to be involved like in this example : http://algorithmist.wordpress.com/20...ne-code-part-i which I can't seem to make sense of in order to test it out in my own project and simplify it.

If Anyone can provide any insight or direction, or maybe even an example or two that could steer me in the right direction, that would be fantastic!! I'm ripping my hair out trying to come up with a solution to this looming task.

[joshstrike]

Yeah, that code's kinda gnarly, but that's probably what you're gonna have to do to make it work. Bezier math is a *****. I hope you're charging plenty for this project.
You definitely gotta split it up into individual characters unless you wanna do some crazy bitmapdata operations on the result, which won't look good anyway. Each letter's rotation is gonna have to match a certain stretch of the path it's arcing on. Only way to get that letter's rotation is either from the tangent of the start and end points of that segment plus an average of their inner control points. If the path is a perfect circle you could shortcut it by placing each letter in a movieclip at whatever distance y south of the center that's equal to the radius, then rotating the whole movieclip. But if it's an organic path, you got some serious math classes ahead of you...I failed calculus and dropped outta college so, uh...I can't answer this for you better than that unless you wanna pay me ten grand to crack the books and study for a week...

[a_modified_dog]

text along a path
text on a circle

http://www.peterjoel.com/Samples/index.php

do these examples help ?

[neznein9]

I posted a proof of concept for this a couple months ago but now I can't seem to find the post anywhere...regardless, you just need to divide the text into one textfield per character, then position them along the curve in order (ie. if you had 5 letters, position them at 0, .25, .5, .75, 1). The tough part is adjusting the rotation normal to the tangent...The easy way is to calculate the two endpoints of the tangent by figuring out your percentage along the two lines from the endpoints to the control, then convert to polar coordinates and rotate the line 90°...here's the bezier formula:


ƒ(x) = (1 - x)² • A₀ + 2x(1 - x) • C + x² • A₁

Calculates position for a given x between 0 and 1.
A₀ is the startpoint's x value.
A₁ is the endpoints x value.
C is the control's x value. (Same as in curveTo)

To calculate the y value, use the same formula with y instead of x ordinates.