我有一个用例，我需要在canvas元素上呈现重要量（~50,000个字形）的清晰，可伸缩的文本字符串。到目前为止我尝试过的最佳解决方案涉及对画布元素上绘制的文本进行三角测量（使用fillText方法绘制文本），将矩阵制服和表示该字符串的Float32Array三角形上传到GPU WebGL的。使用这种方法，我能够以大约30fps渲染100,000个字形。字形在非常高的缩放级别变得块状，但这对我的用例来说很好。
然而，这种方法每串约250毫秒的开销，因为我首先将字符串绘制到内存中的canvas元素，读取像素数据，将位图图像转换为矢量，然后对矢量数据进行三角测量。在网上搜索解决方案时，我遇到了两个有趣的开源项目：
所以现在我想重新编写我的初始概念证明以使用OpenType和Earcut。用于将曲线数据馈送到Earcut的OpenType，以及用于对该数据进行三角测量并返回表示每个三角形的点的数组的Earcut。
我的问题是，我无法弄清楚如何获取OpenType提供的数据并将其转换为Earcut接受的格式。任何人都可以为此提供帮助吗？
更多信息：
这个StackOverflow问题有一些很好的信息，但缺少一些实现细节：Better Quality Text in WebGL。我想我想要完成的是＆＃34; Font as Geometry＆＃34;第一个答案中描述的方法。
答案 0 :(得分：3)
您可以使用Font.getPath创建路径。路径包括通过path.commands访问的移动到，线到，曲线到，四到和关闭的指令。当然，您需要首先将贝塞尔曲线指令转换为小段。
一旦你有一组封闭的路径，你需要确定哪些是洞。内轮廓将以与外轮廓相反的方向定向，您可以将它们分配到包含它们的最小外轮廓。一旦你有＆lt;外部轮廓和一组孔的组＆gt;你应该能够把它送到智能图书馆。
这是一个简单的实现，假设没有交叉点。对我来说，它对大多数字体都很有效，除了极少数具有交叉路径的“奇特”字体。
以下是一个有效的例子：https://jsbin.com/gecakub/edit?html,js,output
除了为每个字符串创建网格外，您还可以为单个字符创建网格，然后使用来自库的字距调整数据自己定位它们。
编辑：此解决方案仅适用于TTF字体，但可以通过忽略路径方向并使用更好的“路径A在路径内”轻松调整CCF（.otf） B“检查，除非字体有相交的路径。