沿贝塞尔曲线定位图像 [英] 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.

由于各种原因，由于字体需要非常具体，因此需要将文本更改为一组图像.因此，我们将为字母的每个允许字符使用一个PNG.因此，如果用户输入单词"TEST"，则系统将拉出字母T，E，S和T，并将它们彼此相邻放置.这部分不是问题.

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.

问题是迫使每个图像都遵循与使用graphics.DrawString的文本相同的贝塞尔曲线.图片必须正确放置，并且理想情况下还应正确旋转.

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?

推荐答案

快速的答案是您简单"

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.

此网站通过分解路径中的图片

但是，正如我肯定会开始显示以前的链接一样，这是一个计算密集型过程.相反，您可能会发现将图像简单地转换为字体并使用以前使用的方法会容易得多.该解决方案将依赖于某些第三方工具来进行转换，因此我很犹豫地提出建议.但是，(许多)方向之一是使用栅格转矢量图形工具，例如开源 Inkscape ，然后从矢量图形输出中创建字体.此方法的缩放效果最佳，但可能需要一个单独的步骤，将输出转换为首选字体格式，例如True-Type.

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.

这篇关于沿贝塞尔曲线定位图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！