HTML5中canvas ctx.fillText不会换行吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (382)

如果文本包含“\ n”,我似乎无法将文本添加到画布。我的意思是,换行符不显示/工作。

ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上面的代码将"s ome \n <br/> thing"在一行中绘制。

这是fillText的限制还是我做错了?“\ n”在那里,不打印,但它们也不起作用。

提问于
用户回答回答于

我担心它是Canvas'fillText的限制。没有多线支持。更糟糕的是,没有内置的方式来衡量线条高度,只有宽度,使自己更难!

许多人已经编写了自己的多线支持,也许是Mozilla Skywriter最值得关注的项目。

需要做的事情是多次fillText调用,同时每次将文本的高度添加到y值。

用户回答回答于

如果只是想照顾文本中的换行符,可以通过拆分新行处的文本并多次调用 fillText()

var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
    console.log(c);
var txt = 'line 1\nline 2\nthird line..';
var x = 30;
var y = 30;
var lineheight = 15;
var lines = txt.split('\n');

for (var i = 0; i<lines.length; i++)
    c.fillText(lines[i], x, y + (i*lineheight) );

canvas{background-color:#ccc;}

<canvas id="c" width="150" height="150"></canvas>

我只是做了一个概念的包装验证(在指定的宽度上进行绝对包装,没有处理单词的问题),

var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text to print';

printAt(c, txt, 10, 20, 15, 90 );


function printAt( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;
    
    if (fitWidth <= 0)
    {
         context.fillText( text, x, y );
        return;
    }
    
    for (var idx = 1; idx <= text.length; idx++)
    {
        var str = text.substr(0, idx);
        console.log(str, context.measureText(str).width, fitWidth);
        if (context.measureText(str).width > fitWidth)
        {
            context.fillText( text.substr(0, idx-1), x, y );
            printAt(context, text.substr(idx-1), x, y + lineHeight, lineHeight,  fitWidth);
            return;
        }
    }
    context.fillText( text, x, y );
}

canvas{background-color:#ccc;}

<canvas id="c" width="150" height="150"></canvas>

还有一个词包装(打破空间)的概念证明。

var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text. Some more to print!';

printAtWordWrap(c, txt, 10, 20, 15, 90 );


function printAtWordWrap( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;
    
    if (fitWidth <= 0)
    {
        context.fillText( text, x, y );
        return;
    }
    var words = text.split(' ');
    var currentLine = 0;
    var idx = 1;
    while (words.length > 0 && idx <= words.length)
    {
        var str = words.slice(0,idx).join(' ');
        var w = context.measureText(str).width;
        if ( w > fitWidth )
        {
            if (idx==1)
            {
                idx=2;
            }
            context.fillText( words.slice(0,idx-1).join(' '), x, y + (lineHeight*currentLine) );
            currentLine++;
            words = words.splice(idx-1);
            idx = 1;
        }
        else
        {idx++;}
    }
    if  (idx > 0)
        context.fillText( words.join(' '), x, y + (lineHeight*currentLine) );
}

canvas{background-color:#ccc;}

<canvas id="c" width="150" height="150"></canvas>

在第二个和第三个示例中,我使用的measureText()是显示打印时字符串将有多长(以像素为单位)的方法。

扫码关注云+社区

领取腾讯云代金券