Html Fabric.js文本宽度被忽略

我正在尝试从表单输入向画布添加文本。 有没有一种方法可以自动包装fabricjs文本，以适应画布

我正在努力克服三个问题： 1.如果字符串长度超过给定的空格，则文本不符合“text.left”位置。 2.我无法转义换行符，因此\n是与文本内联编写的。 3.在更新文本之前，将完全忽略“中心对齐”

以下是我的结构文本：

var text = new fabric.Text($('#myInput').text(), {
    left: 10,
    top: 12,
    width: 230,
    textAlign: 'center',
    fontSize: 28,
    fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS'
});

A显示了问题

如何插入换行符？ 如何将给定文本块中的文本居中对齐？ 如何在画布上定位文本块而不必进行编辑？

编辑：

我发现我的问题部分来自于使用文本输入。我将其更改为textarea元素，现在可以轻松插入换行符。奇怪的是，当我这样做时，居中也起作用

我想唯一的问题是，当文本宽度大于给定的文本块宽度时，文本不会自动换行。因此，它不是包装和添加线条，而是扩展到画布之外

---

有没有一种方法可以进行换行文字类型的样式设置，或者我必须计算字符数并插入换行符？

我知道这一个很旧，但我遇到了同样的问题。在我的例子中，文本在一个组中，因此我希望它以特定的宽度包装，但允许该组调整大小（因此我无法使用

文本框

）。最后，我对字符串进行了预处理，以在满足设置的宽度时放置换行符

 function addTextBreaks(text, width, fontSize) {
    text = text.trim();
    var words = text.toString().split(' '),
        canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        idx = 1,
        newString = '';
    context.font = fontSize + 'px Lato';
    while (words.length > 0 && idx <= words.length) {
        var str = words.slice(0, idx).join(' '),
            w = context.measureText(str).width;
        if (w > width) {
            if (idx == 1) {
                idx = 2;
            }
            newString += words.slice(0, idx - 1).join(' ');
            newString += '\n';
            words = words.splice(idx - 1);
            idx = 1;
        }
        else { idx += 1;}
    }
    if (idx > 0) {
        var txt = words.join(' ');
        newString += txt;
    }
    return newString;
}

函数addTextBreaks（文本、宽度、字体大小）{
text=text.trim（）；
var words=text.toString（）.split（“”），
canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'），
idx=1，
新闻字符串=“”；
context.font=fontSize+'px Lato'；
while（words.length>0&&idx-width）{
如果（idx==1）{
idx=2；
}
newString+=words.slice（0，idx-1）.join（“”）；
新闻字符串+='\n'；
单词=单词拼接（idx-1）；
idx=1；
}
else{idx+=1；}
}
如果（idx>0）{
var txt=words.join（“”）；
newString+=txt；
}
返回新闻字符串；
}

您尝试过scaleToWidth（）方法吗？太棒了！你能不能把它作为一个答案提交给我，这样我就可以把它标记为正确的呢。我将逻辑包装在for循环中，

var lines=text.toString（）.split（'\n'）

来解释用户插入的换行符。然后，它将每一行作为自己的元素打断。这太棒了！非常感谢。