Position images along a Bézier curve

有些话、适合烂在心里 提交于 2019-12-12 04:18:11

问题


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?


回答1:


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.



来源:https://stackoverflow.com/questions/7503476/position-images-along-a-b%c3%a9zier-curve

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!