文本框导致fabric js中的字体问题

Posted 2023-03-25

【中文标题】文本框导致fabric js中的字体问题

【英文标题】：textbox causing issue with font in fabric js

【发布时间】：2016-08-15 17:15:26

【问题描述】：

我正在使用此代码在fabric js 中添加简单的text 元素，

var t = new fabric.IText("Hello world !", 
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontSize: 25,
    top : 50,
    left:50
);
canvas.add(t);

而且它的工作完美，现在当我在这样的样式中添加字体时，

<style type="text/css">
    @import url(//fonts.googleapis.com/css?family=Playfair+Display);
</style>

然后像这样使用fabricjs将textbox添加到画布中，

var t = new fabric.IText("Hello world !", 
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontFamily:'Playfair Display',
    fontSize: 25,
    top : 50,
    left:50
);
canvas.add(t);

应用字体后， 但是当我点击画布中的 texbox 时，你可以看到文本框有这样的问题http://awesomescreenshot.com/0f05taz2f3。但这仅在您第一次加载页面或使用ctrl+f5 强制重新加载页面时才会发生。 这是fiddle 第二次完美加载。

【参考方案1】：

在您添加文本时，字体尚未完全加载。这意味着fabric 正在根据默认字体而不是您的webfont 确定元素的宽度。

您可以等到字体加载完毕后再添加到画布中。 This question 有一些关于如何正确执行此操作的答案。

【讨论】：

试过了，但似乎还是不行。遇到同样的问题。有什么解决办法吗？

【参考方案2】：

这是 Fabric 的 GitHub 存储库上的 known issue，据推测正在处理中。