/****绘制自动换行的字符串****/
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 有办法解决这个问题吗？
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 }, })