调整fabricjs文本框大小以匹配文本选择

Question

我有一段代码可以Textbox这样创建一个新的：

new fabric.Textbox('Ajouter du texte')

问题是文本框与其内容相比太小：

如果我设置固定宽度，我会得到一些填充：

new fabric.Textbox('Ajouter du texte', {width: 350})

如何调整文本框大小以匹配文本选择大小？我找不到有关如何获取选择尺寸的任何信息。

我用的是布料版4.0.0-beta.5。

Answer 1

我现在保留的解决方案是逐渐增加宽度，直到不超过 1 行：

const text = new fabric.Textbox("Ajouter du texte")

while (text.textLines.length > 1) {
  text.set({width: text.getScaledWidth() + 1})
}

请随意提出更好的解决方案，以便我可以更新已接受的答案。

[编辑]

要使其在文本编辑期间工作：

function adjustTextWidth(evt: fabric.IEvent) {
  if (evt.target instanceof fabric.IText) {
    const text = evt.target.text || ""
    while (evt.target.textLines.length > text.split("\n").length) {
      evt.target.set({width: evt.target.getScaledWidth() + 1})
    }
  }
}

canvas.on("text:changed", adjustTextWidth)

[编辑2]

我找到了一个更好的方法来实现我的目标：

fabric.Textbox.prototype._wordJoiners = /[]/;

这样，空格就不会被视为单词连接符，并且文本仅在用户键入时才会中断Enter。我还添加了此函数来在删除文本时调整文本框宽度：

function fitTextboxToContent(text: fabric.IText) {
  const textLinesMaxWidth = text.textLines.reduce((max, _, i) => Math.max(max, text.getLineWidth(i)), 0);
  text.set({width: textLinesMaxWidth});
}