使用 Earcut 对 OpenType.js 中的路径数据进行三角测量

Question

我有一个使用的情况下，我需要呈现显著canvas元素上清晰的，可扩展的文本串的量（〜50000个字形）。到目前为止，我尝试过的最佳解决方案涉及对画布元素上绘制的文本进行三角剖分（文本是使用 fillText 方法绘制的），通过 WebGL 将矩阵制服和表示该字符串的三角形的 Float32Array 上传到 GPU。使用这种方法，我能够以大约 30fps 的速度渲染 100,000 个字形。字形在非常高的缩放级别下变得块状，但这对我的用例来说很好。

但是，此方法每个字符串的开销约为 250 毫秒，因为我首先将字符串绘制到内存中的画布元素，读取像素数据，将位图图像转换为矢量，然后对矢量数据进行三角测量。在网上搜索解决方案，我遇到了两个有趣的开源项目：

• OpenType.js：https : //opentype.js.org/
• 耳切：https : //github.com/mapbox/earcut

所以现在我想重写我最初的概念证明以使用 OpenType 和 Earcut。OpenType 用于将曲线数据输入 Earcut，Earcut 用于对数据进行三角剖分并返回表示每个三角形点的数组。

我的问题是，我不知道如何获取 OpenType 提供的数据并将其转换为 Earcut 接受的格式。任何人都可以为此提供帮助吗？

更多信息：

这个 StackOverflow 问题有一些很好的信息，但缺少一些实现细节：WebGL 中的 Better Quality Text。我想我想要完成的是第一个答案中描述的“几何字体”方法。

Answer 1

您可以使用Font.getPath. 路径由移动到、线到、曲线到、四边形和关闭指令组成，可通过path.commands. 当然，您首先需要将贝塞尔曲线指令转换为小段。

一旦你有一组封闭的路径，你需要确定哪些是洞。内部轮廓将朝向与外部轮廓相反的方向，您可以将它们分配给包含它们的最小外部轮廓。一旦你有一组<外部轮廓和一组孔>，你应该能够将它提供给耳切库。

这是一个简单的实现，假设没有交集。对我来说，它适用于大多数字体，除了极少数具有交叉路径的“花哨”字体。

这是一个工作示例：https : //jsbin.com/gecakub/edit?html,js,output

您也可以为单个字符创建网格，而不是为每个字符串创建网格，然后使用库中的字距调整数据自行定位它们。

编辑：此解决方案仅适用于 TTF 字体，但可以.otf通过忽略路径方向并使用更好的“路径 A 在路径 B 内”检查来轻松调整 CCF ( )，除非字体具有相交路径。