Question

如果文本行超过一定数量的像素宽，我试图包装我的文本。如果它超出了我希望它的最大宽度，我有文本到打印到控制台的位置（我这样做是为了测试目的）但我对如何获取文本包装无能为力。任何人都可以帮助或指出我正确的方向吗？

var text = result[0].text;
var max_text_width = 150;
ctx.font = text.font;
ctx.textAlign = text.align;
ctx.fillStyle = text.color;
for(var i = 0; i < text.fill.length; i++){
    var metrics = ctx.measureText(text.fill[i]);
    var text_width = metrics.width;
    if(text_width > max_text_width){
        ctx.fillText(text.fill[i], text.x[i], text.y[i]);
    }
    else{
        ctx.fillText(text.fill[i], text.x[i], text.y[i]);
    }
}

Answer 1

<canvas>适用于图形，不提供非常复杂的文本打印工具。通常的方法是使<div>透明<canvas>并使用JavaScript DOM API和CSS在画布上布置文本元素（如果用例可行）。

如果DOM没有，那么有两个选项

编写您自己的测试布局代码，例如looking example from here
有一些基于<canvas>高级文本操作的库，请参阅Zebra，CanvasText

然而，由于<canvas>缺少准确的文本和字符跟踪和样式的API，基于DOM的方法将优于可用效果和渲染输出。

如何使用画布包装文本？

1 个答案: