我有一个使用的情况下,我需要呈现显著canvas元素上清晰的,可扩展的文本串的量(〜50000个字形)。到目前为止,我尝试过的最佳解决方案涉及对画布元素上绘制的文本进行三角剖分(文本是使用 fillText 方法绘制的),通过 WebGL 将矩阵制服和表示该字符串的三角形的 Float32Array 上传到 GPU。使用这种方法,我能够以大约 30fps 的速度渲染 100,000 个字形。字形在非常高的缩放级别下变得块状,但这对我的用例来说很好。
但是,此方法每个字符串的开销约为 250 毫秒,因为我首先将字符串绘制到内存中的画布元素,读取像素数据,将位图图像转换为矢量,然后对矢量数据进行三角测量。在网上搜索解决方案,我遇到了两个有趣的开源项目:
所以现在我想重写我最初的概念证明以使用 OpenType 和 Earcut。OpenType 用于将曲线数据输入 Earcut,Earcut 用于对数据进行三角剖分并返回表示每个三角形点的数组。
我的问题是,我不知道如何获取 OpenType 提供的数据并将其转换为 Earcut 接受的格式。任何人都可以为此提供帮助吗?
更多信息:
这个 StackOverflow 问题有一些很好的信息,但缺少一些实现细节:WebGL 中的 Better Quality Text。我想我想要完成的是第一个答案中描述的“几何字体”方法。