fabric js 中的文本位于边界框之外

Question

我使用 Fabric js 进行注释。我在添加特定字体系列的文本时遇到问题。当我添加文本时，它会超出边界框，这就是删除外部文本的原因。如何修复边框内的文本？

Answer 1

编辑：这就是我解决问题的方法。

        canvas.getObjects().forEach(function(object) {
                
                if(object.type=='i-text'){
                    object.set("width", object.width * 1.3)

...

之前的回答： 你解决了吗？遇到同样的问题。

这就是我的案例中的重现方式：

1. 将画布另存为 JSON
2. itext 元素被赋予宽度
3. 加载 JSON
4. 更改itext元素字体。
5. 新字体更大，因此文本超出了边界框。

Answer 2

字体加载后使用这个

await loadFontsInCanvas(canvas, fontData);

      fabric.util.clearFabricFontCache();
      canvas.getObjects()?.forEach((object) => {
        if (object?.Type === 'text') {
          handleTextOverflow(object);
        }
      });
      canvas.renderAll();





function handleTextOverflow(textbox) {
  const textWidth = textbox.calcTextWidth();
  const textHeight = textbox.calcTextHeight();
  textbox.set({
    width: textWidth,
    height: textHeight,
  });
}

所以它要做的是清除字体缓存，这就是它计算错误的框大小的原因