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

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

javascript typescript

Javascript 调整fabricjs文本框大小以匹配文本选择,javascript,typescript,fabricjs,Javascript,Typescript,Fabricjs,我有一段代码可以这样创建一个新的文本框： new fabric.Textbox('Ajouter du texte') 问题是文本框与其内容相比太小：如果我设置了固定的宽度，我会得到一些填充： new fabric.Textbox('Ajouter du texte', {width: 350}) 如何调整文本框大小以匹配文本选择大小？我找不到任何关于如何获取选择维度的信息我使用的是fabric版本4.0.0-beta.5。我在文档中搜索过，但没有找到任何可以自动将容器调整为文本大小的内

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

new fabric.Textbox('Ajouter du texte')

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

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

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

如何调整文本框大小以匹配文本选择大小？我找不到任何关于如何获取选择维度的信息

我使用的是fabric版本4.0.0-beta.5。

我在文档中搜索过，但没有找到任何可以自动将容器调整为文本大小的内容

您可以做的最好的事情是获取每行的大小，如果宽度总和小于所需的最大值，则将宽度设置为文本框。出于某种原因，您还需要为其添加一个小宽度

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();

检查此示例：

最好在文本框上有一些属性，例如max_width，如果文本小于此值，则自动将大小调整为文本大小

我在文档中搜索过，但没有找到任何可以自动将容器调整为文本大小的内容

您可以做的最好的事情是获取每行的大小，如果宽度总和小于所需的最大值，则将宽度设置为文本框。出于某种原因，您还需要为其添加一个小宽度

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();

检查此示例：

最好在文本框上有一些属性，例如max_width，如果文本小于此值，则自动将大小调整为文本大小

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

const text=new fabric.TextboxAjouter du texte 而text.textLines.length>1{ text.set{width:text.getScaledWidth+1} } 请随意提出更好的解决方案，以便我可以更新已接受的答案

[编辑]

要使其在文本编辑期间正常工作，请执行以下操作：

功能调整TextWidthEVT:fabric.IEvent{ 如果evt.target instanceof fabric.IText{ const text=evt.target.text | 而evt.target.textLines.length>text.split\n.length{ evt.target.set{width:evt.target.getScaledWidth+1} } } } canvas.ontext：已更改，调整TextWidth [编辑二]

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

fabric.Textbox.prototype.\u wordJoiners=/[]/；这样，空格就不会被视为一个词的连接符，文本只有在用户输入时才会中断。我还添加了此功能，用于在删除文本时调整文本框的宽度：

函数fitTextboxToContenttext:fabric.IText{ const textLinesMaxWidth=text.textLines.reducemax，u，i=>Math.maxmax，text.getlinewidth，0； text.set{width:textLinesMaxWidth}； }