画布如何绘制多行文字
发布于 7 年前 作者 ming40 10979 次浏览 来自 问答
  • 需求的场景描述（希望解决的问题）

想要做出一个贺卡，用户能够自己输入文字，然后通过拉伸和movable-view的缩放自己确定大小和位置。但是发现之后无法绘制在canvas上，因为canvas不支持文字换行。

  • 希望提供的能力

canvas支持写入文字换行。

2 回复

针对canvas问题超出有效区域仍然不能换行，今天真好有空封装了一个字符串宽度切割的函数，希望能帮助到你；

//str 字符串 width 单文字宽度 max_width 最大宽度 level 等级 suffix 后缀
 
function sub_str(str, width, max_width,level,suffix){
 
var temp_str = str;
 
var new_str_obj = [];
 
for(var j = 0;j < level ; j++){
 
var text_arr = temp_str.split('');
 
for (var i = 1; i <= text_arr.length; i++) {
 
if (text_arr.length * width < max_width) {
 
new_str_obj[j] = temp_str
 
temp_str = '';
 
break;
 
}else if (i * width <= max_width && (i + 1) * width > max_width){
 
var sub_str = temp_str.substring(0, i);
 
if (suffix&&level == j+1)
 
new_str_obj[j] = sub_str + suffix;
 
else
 
new_str_obj[j] = sub_str
 
temp_str = temp_str.substring(i);
 
}
 
}
 
}
 
return new_str_obj;
 
}

在canvas中使用时候要用先测量每个字占用多少px，字体发小不一样占用的px就不同。

//单个字体占位距离

var solo_width = ctx.measureText('测').width

  var sub_str = '欢迎你呀';

   //文字域最大宽度 单位px
   const width_max = '50';
   var sub_str = sub_str(addr,solo_width,width_max,5,'...');
   ctx.fillStyle = '#5a6373';
   for(var i in sub_str){
       var height = 172 + i * solo_width
       ctx.fillText(sub_str[i], 23, height)
   }

measureText，长了就换行，需要自己计算一下下呢

回到顶部