CODEWITHSUNDEEP
c#.netgdibezier
ajbrun
ajbrun

Reputation: 333

Position images along a Bézier curve

We currently have a dynamic image, which holds on it text which is created from user input. This text follows a Bézier curve to define its position and rotation.

For various reasons, the text needs to be changed to be a set of images as the font needs to be very specific. We will therefore have one PNG for every allowable character of the alphabet. So if the user enters the word "TEST", the system will pull out the letters T, E, S and T and position them next to each other. This part isn't an issue.

The problem is forcing each of the images to follow the same Bézier curve as the text did using graphics.DrawString. The images must be positioned correctly, and ideally should be rotated correctly as well.

Is this possible, and how could this be done?

Upvotes: 0

Views: 700

Answers (1)

ex0du5
ex0du5

Reputation: 2624

The quick answer is that you "simply"

  • parametrise the bezier curve evenly (PDF on math) (Explanation of what is wrong with standard parametrisation)
  • calculate the normals to the curve
  • arrange your images along the curve according to the even parametrisation using the glyph widths as the parameter distance
  • rotate your images so that "up" for your image is the normal direction to the curve

But even this does not get a fairly good looking image. Usually you need to apply a nonlinear transform to each image so that parts away from curve have different width than those near the curve, depending on curvature and convexity.

This site explains many of the details by decomposing the outline of an image in paths

However, as the previous links I'm sure start to show, this is a calculation-intensive process. Instead, you may find it much easier to simply convert your images to fonts and use the method you were using previously. This solution would rely upon some third-party tool to do the conversion, and I hesitate to make suggestions. One direction, though, (of many) would be to use a raster-to-vector graphics tool like the open source Inkscape and create your fonts from the vector graphics output. This method scales best but may involve a separate step of converting the output to a preferred font format like True-Type.

Upvotes: 1

Related Questions