收藏
回答

使用canvas画布时多行文本应该怎么换行?

/****绘制自动换行的字符串****/


function drawText(t,x,y,w){

var chr = t.split("");

var temp = "";

var row = [];

context.font = "20px Arial";

context.fillStyle = "black";

context.textBaseline = "middle";

for(var a = 0; a < chr.length; a++){

if( context.measureText(temp).width < w ){

;

}

else{

row.push(temp);

temp = "";

}

temp += chr[a];

}

row.push(temp);

for(var b = 0; b < row.length; b++){

context.fillText(row[b],x,y+(b+1)*20);

}

}

这个函数只能规定字数限制,并不能限制宽度。

小程序canvas 有办法解决这个问题吗?

回答关注问题邀请回答
收藏

1 个回答

  • Mr.Zhang
    Mr.Zhang
    2021-01-13
    Page({
        drawCanvas: function(ctx) {// 地址
            ctx.setFontSize(14)
            ctx.setFillStyle('#9E7240')
            ctx.textAlign="center";
            const txHash = this.data.info.txHash ? this.data.info.txHash : '暂无信息'
            this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行
            ctx.draw()
            ctx.save()
        },// 文本自动换行
        drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
            var lineWidth = 0;
            var lastSubStrIndex = 0; //每次开始截取的字符串的索引
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width;
                if (lineWidth > canvasWidth) {
                    ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                    initHeight += 16; //16为字体的高度
                    lineWidth = 0;
                    lastSubStrIndex = i;
                    titleHeight += 30;
                }
                if (i == str.length - 1) { //绘制剩余部分
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
                }
            }
            // 标题border-bottom 线距顶部距离
            titleHeight = titleHeight + 10;
            return titleHeight
        },
    })
    
    2021-01-13
    有用 2
    回复 2
    • Mr.Zhang
      Mr.Zhang
      2021-01-13
      这是我用到的截取部分,你可以根据自己的实际情况修改。(有用的话,点个有用吧,感谢了~~)
      2021-01-13
      回复
    • 同周共济
      同周共济
      2021-07-09回复Mr.Zhang
      如果文字有段落格式,如何换行
      2021-07-09
      回复
登录 后发表内容
问题标签