Slightly curved/arched text in Flex

Question

Hi,

I'm writing in Flex a simple app that allows product personalization, right now I'm working on adding engraving text. Most products are round so I want the text the be slightly curved when placed on the product to give it more realism.

I've looked into text curving/arching in Flex but the solutions I've found seem to be overkill for my requests.

Does anyone know how I can slightly curve text in Flex without too much hassle?

This is what I'm looking to achieve http://i.imgur.com/wZIW8.png

Thank you.

Answer 1

Could be Degrafa a solution? http://algorithmist.wordpress.com/2008/10/08/text-along-a-spline-iii/

But I'm afraid that this is also "overkilled" but imho there is no simple solution.

Answer 2

If it's a fixed single arc (ie, it can be calculated by "squishing" part of a semicircle), you could do it, but it'd be a few hours' work. Here's how I'd tackle the problem:

1. Measure the text with UIText, and use this to get the x-position of each letter
2. Use some simple trig to get a new baseline position and rotation angle of each letter
3. Use some more trig to transform each position and rotation to account for Player doing position and rotation around the top-left of DisplayObjects.
4. Use a UIText for each letter, applying said position & rotation parameters.

Steps 2 and three would be the kind of thing you could prototype in AS3 and then port to PixelBender if it was too slow.

Or... Generate the text as images, in Photoshop if you need it to look nicer, or ImageMagick on the server if it needs to be dynamic.

Answer 3

2 ways to accomplish this task are known to me, both of them are doable, but both require quite a bit of work:

a) Replace the single dynamic text field with a series of dynamic text fields > one per character. And then rotate each character around a programmatic curve.

http://blog.tsclausing.com/post/49

b) Use the DisplacementMapFilter class to manipulate a single dynamic text field's pixels into the desired curved shape.