沿Bézier曲线定位图像

Question

我们目前有一个动态图像，其中包含从用户输入创建的文本。该文本遵循贝塞尔曲线来定义其位置和旋转。

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

问题是迫使每个图像遵循与文本使用graphics.DrawString相同的Bézier曲线。图像必须正确定位，理想情况下也应正确旋转。

这可能，这怎么可能呢？

Answer 1

快速回答是你“简单地”

• 参数化bezier曲线均匀（PDF on math）（Explanation of what is wrong with standard parametrisation）
• 计算曲线的法线
• 使用字形宽度作为参数距离，根据均匀参数化沿曲线排列图像
• 旋转图像，使图像的“向上”是曲线的法线方向

但即使这样也无法获得相当不错的图像。通常，您需要对每个图像应用非线性变换，以使远离曲线的部分具有与曲线附近不同的宽度，具体取决于曲率和凸度。

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

但是，正如之前的链接我确定开始显示，这是一个计算密集型过程。相反，您可能会发现将图像简单地转换为字体并使用之前使用的方法会更容易。此解决方案将依赖某些第三方工具进行转换，我不愿提出建议。但是，（很多）的一个方向是使用像开源Inkscape这样的光栅到矢量图形工具，并从矢量图形输出中创建字体。此方法最佳扩展，但可能涉及将输出转换为True-Type等首选字体格式的单独步骤。