fabric js 节点 js 到 SVG 错误的文本定位

Question

我尝试在 node 服务器上使用 fabricjs 来创建 svg。我的问题是canvas的toSVG()函数没有正确识别字体，它根据错误的字体计算字符位置。

使用的版本:

节点:6.10

"canvas": "1.6.5"
"fabric": "1.7.14"

AFAIK:较新的“1.7.*”版本的结构也无法正确计算位置。

根据教程 (fabric-intro-part-4)，它适用于 PNG。

canvas.contextContainer.addFont(font);
canvas.contextTop.addFont(font);

生成 PNG 或 SVG:

canvas.toDataURL({
  format: 'png',
});
canvas.toSVG();

并且 PNG 输出位置正确(参见示例)，但使用 toSVG() 不会正确应用(自定义)字体。

在示例中您可以看到自定义字体没有正确显示(正确的字体用于显示，因为字体安装在我当前的系统上，但没有安装在创建 SVG 的节点服务器上!)

我的下一个选择是比较 toDataURL(...) 和 IText toSVG() 的源代码，但我不确定这是否有任何帮助.

由于生成 SVG 的函数是在 AWS Lambda 中执行的，因此我无法在 Linux 操作系统 (AFAIK) 中安装字体。

您有什么想法，或者是否有任何我错过的教程或错误报告？是否有类似 contextTop 或 contextContainer 的东西，我可以在其中添加自定义字体，以便在 toSVG() 函数中应用它们？

非常感谢您提出任何建议。

例子: Ilustration of the Issue

PS:在浏览器中 toSvg() 知道字体，因为浏览器加载了它们，因此定位是正确的!

还询问了: https://groups.google.com/forum/#!topic/fabricjs/mff7Pr4fkGY

错误报告: https://github.com/kangax/fabric.js/issues/4355

复制示例: https://github.com/willKo/BugTest

Answer 1

如果不访问目标字体文件，任何软件都无法正确定位字体字形。每种字体都有不同的度量和定位规则，这些规则在非常复杂的 opentype 表中进行了描述，这些表是字体文件本身的一部分。