将位图字符转换为三角形

Question

我试图使用html canvas元素将字体文件中的每个字符绘制到画布上。为了使这个问题尽可能简单，假装只画一个字符到画布。从那里，我想使用Javascript来分析画布并创建构成整个角色的画布的三角形区域。我在三角形中需要它的原因是以后可以将数据发送到WebGL，因此可以渲染文本并且不会丢失数据，无论是向上还是向下缩放文本大小。

我正在寻找某种算法来实现这一点，或者至少是一些知识让我朝着正确的方向前进。如果您认为我应该使用不同的方法，请告诉我原因，但我认为这是最好的方法，以多种方式提供修改文本的方法，以及创建3D块文本。

Answer 1

我建议您从关键字Polygon Triangulation开始。

使用此方法，您可以将n-Polygons拆分为三角形，如下所示：

这些方法可能仅适用于具有真实（而非圆形）边缘的图形。

Answer 2

这是一篇关于如何使用着色器绘制分辨率无关曲线的文章

http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf

我的理解是，不是将形状分解为三角形，而是将它们分解为四边形，并在顶点中对足够的信息进行排序，以在每个四边形内绘制一部分曲线。换句话说，当着色器绘制每个四边形时，有一个公式，每个像素可以计算该像素是在曲线内还是曲线外。

Answer 3

那么，您是否尝试将光栅图像转换为矢量数据？ 放大时，这将导致非常锯齿状的几何体。 由于每个像素都被视为几何体的方形边缘部分。

难道你不能掌握你正在绘制的每个字形的原始矢量（贝塞尔曲线）几何图形吗？

将其转换为三角形条带和扇形看起来更平滑。