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

Question

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

new fabric.Textbox('Ajouter du texte')

问题在于文本框与其内容相比很小：

Image

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

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)

Answer 2

我已经在TextBox文档中进行了搜索，但没有发现任何可以自动将容器调整为文本大小的东西。

最好的办法是获取每行的大小，如果宽度总和小于所需的最大值，则将宽度设置为“文本框”。由于某些原因，您还需要为其添加一个较小的宽度。

var canvas = new fabric.Canvas("canvas");
var text = new fabric.Textbox("Ajouter du texte");

var textSize = 0;
for (var i = 0; i < text._textLines.length; i++) {
  textSize += text.measureLine(i).width;
}

var augmentedTextSize = textSize + 25;
if (augmentedTextSize < 500) {
  text.set({ width: augmentedTextSize });
}

canvas.add(text);
canvas.renderAll();

检查以下示例：https://codesandbox.io/s/stackoverflow-60411035-fabric-js-400-beta5-7s7id

最好在TextBox上具有某种属性，例如“ max_width”，如果文本小于该属性，则自动将其大小调整为文本大小。