沿着Bézier曲线定位图像

本文关键字:曲线 定位 图像 zier #233 沿着 | 更新日期: 2023-09-27 18:09:30

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

由于各种原因,需要将文本更改为一组图像,因为字体需要非常具体。因此,我们将为字母表的每个允许字符提供一个PNG。因此,如果用户输入单词"TEST",系统将拉出字母T、E、S和T,并将它们放在一起。这部分不是问题。

问题是强迫每个图像遵循相同的bsamzier曲线作为文本使用graphics.DrawString。图片必须正确放置,最好也能正确旋转。

这是可能的吗?如何做到?

沿着Bézier曲线定位图像

简单的回答是

  • 均匀地参数化贝塞尔曲线(数学PDF)(解释标准参数化的错误)
  • 计算曲线的法线
  • 使用字形宽度作为参数距离,根据均匀参数化沿曲线排列图像
  • 旋转图像,使图像的"上"为曲线的法线方向

但即使这样也不能得到一个相当好看的图像。通常,你需要对每张图像应用非线性变换,使远离曲线的部分与靠近曲线的部分具有不同的宽度,这取决于曲率和凸性。

这个网站通过分解路径

中的图像轮廓来解释许多细节。

然而,正如我确信前面的链接开始显示的那样,这是一个计算密集型过程。相反,您可能会发现简单地将图像转换为字体并使用之前使用的方法要容易得多。此解决方案将依赖于某些第三方工具来完成转换,因此我不愿提出建议。不过,(在许多方向中)有一个方向是使用像开源Inkscape这样的光栅到矢量图形工具,并根据矢量图形输出创建字体。此方法的可伸缩性最好,但可能涉及将输出转换为首选字体格式(如True-Type)的单独步骤。