沿 Bézier 曲线定位图像

发布于 2024-12-06 02:20:37 字数 271 浏览 0 评论 0原文

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

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

问题是使用graphics.DrawString强制每个图像遵循与文本相同的贝塞尔曲线。图像必须正确定位,并且最好也应正确旋转。

这可能吗?如何做到这一点?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只有一腔孤勇 2024-12-13 02:20:37

简单的答案是,您“简单”地

  • 均匀参数化贝塞尔曲线(数学 PDF) (解释标准参数化有什么问题
  • 计算曲线的法线
  • 根据均匀参数化沿曲线排列图像,使用字形宽度作为参数距离
  • 旋转图像因此图像的“向上”是曲线的法线方向

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

此站点通过分解图像的轮廓来解释许多细节路径

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文