Fabric.js忽略文本宽度

Question

我正在尝试从表单输入向画布添加文本。是否有一种自动换行的方法，以适应画布内部的fabricjs文本？

以下是我的fabric文本： ```html

我正在尝试从表单输入向画布添加文本。 是否有一种自动换行的方法，以适应画布内部的fabricjs文本？

我试图解决3个问题： 1.如果字符串超过给定空间，则文字不会尊重“text.left”位置。 2.我无法转义换行符，因此\n与文本一起写入。 3.在更新文本之前完全忽略中心对齐。

这是我的fabric文本：

```

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'
});

一个演示展示了该问题。

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

编辑：

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

我想唯一的问题是当文本超过给定的文本块宽度时，文本不会自动换行。所以，它不是换行并添加行，而是延伸到画布之外。

是否有一种方法可以进行单词换行类型的排版，还是必须计算字符并插入换行符？

- dval

---

你尝试过使用scaleToWidth方法（http://fabricjs.com/docs/fabric.js.html#line12065）吗？ - ubriaco

太棒了！你能把它提交为答案，这样我就可以标记正确了吗？ - dval

Answer 1

我知道这个问题很老，但我也遇到了同样的问题。在我的情况下，文本在一个组中，所以我想让它换行到特定的宽度，但允许组调整大小（所以我不能使用TextBox）。最后，我预处理字符串，在达到设定宽度时插入换行符。

 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;
}

- Ben Felda

---

我在你的函数中更新了Fiddle，只做了一个修改。我用for循环包装了逻辑，var lines = text.toString().split('\n')，以便考虑用户插入的换行符。然后将每一行作为单独的元素分割。这太棒了！谢谢你。 - dval