<canvas>元素中的文本换行

Question

<canvas>元素中的文本换行

javascripthtmlcanvastext

64

我想使用<canvas>元素在图像上添加文字。首先绘制图像，然后在图像上绘制文字。到目前为止都很好。

但是当文本过长时，它会被画布的开头和结尾截断。我不打算调整画布大小，但我想知道如何将长文本换行为多行以便全部显示。有人能指导我吗？

- Gwood

3

值得一提的是，Fabric.js 在画布上拥有广泛的文本支持（多行、文本样式、装饰、描边等）。 - kangax

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JBelfort · Answer 1

这应该正确地从文本框中获取行：

 function fragmentText(text, maxWidth) {
    var lines = text.split("\n");
    var fittingLines = [];
    for (var i = 0; i < lines.length; i++) {
        if (canvasContext.measureText(lines[i]).width <= maxWidth) {
            fittingLines.push(lines[i]);
        }
        else {
            var tmp = lines[i];
            while (canvasContext.measureText(tmp).width > maxWidth) {
                tmp = tmp.slice(0, tmp.length - 1);
            }
            if (tmp.length >= 1) {
                var regex = new RegExp(".{1," + tmp.length + "}", "g");
                var thisLineSplitted = lines[i].match(regex);
                for (var j = 0; j < thisLineSplitted.length; j++) {
                    fittingLines.push(thisLineSplitted[j]);
                }
            }
        }
    }
    return fittingLines;

然后在画布上绘制获取的线条：-

 var lines = fragmentText(textBoxText, (rect.w - 10)); //rect.w = canvas width, rect.h = canvas height
                    for (var showLines = 0; showLines < lines.length; showLines++) { // do not show lines that go beyond the height
                        if ((showLines * resultFont.height) >= (rect.h - 10)) {      // of the canvas
                            break;
                        }
                    }
                    for (var i = 1; i <= showLines; i++) {
                        canvasContext.fillText(lines[i-1], rect.clientX +5 , rect.clientY + 10 + (i * (resultFont.height))); // resultfont = get the font height using some sort of calculation
                    }