Question

我正在尝试从表单输入向画布添加文本。有没有办法自动包装fabricjs文本，以适应画布内部？

我想解决3个问题： 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'
});

显示问题的fiddle。

<击> 如何插入换行符？如何在给定的文本块中居中对齐文本？如何在不需要编辑的情况下将文本块放在画布上？

编辑：

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

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

有没有办法进行wordwrap类型样式，还是我必须计算字符数并插入换行符？

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

Fabric.js文本宽度被忽略

1 个答案: