小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述（希望解决的问题）
想要做出一个贺卡，用户能够自己输入文字，然后通过拉伸和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;
new_str_obj = [];
for
(
j = 0;j < level ; j++){
text_arr = temp_str.split(
''
);
i = 1; i <= text_arr.length; i++) {
if
(text_arr.length * width < max_width) {
new_str_obj[j] = temp_str
temp_str =
;
break
}
else
(i * width <= max_width && (i + 1) * width > max_width){
sub_str = temp_str.substring(0, i);
(suffix&&level == j+1)
new_str_obj[j] = sub_str + suffix;
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
solo_width = ctx.measureText(
'测'
).width
var sub_str = '欢迎你呀';
//文字域最大宽度 单位px
const width_max =
'50'
sub_str = sub_str(addr,solo_width,width_max,5,
'...'
ctx.fillStyle =
'#5a6373'
i
in
sub_str){
height = 172 + i * solo_width
ctx.fillText(sub_str[i], 23, height)
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
measureText，长了就换行，需要自己计算一下下呢
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
针对canvas问题超出有效区域仍然不能换行，今天真好有空封装了一个字符串宽度切割的函数，希望能帮助到你；
//str 字符串 width 单文字宽度 max_width 最大宽度 level 等级 suffix 后缀functionsub_str(str, width, max_width,level,suffix){vartemp_str = str;varnew_str_obj = [];for(varj = 0;j < level ; j++){vartext_arr = temp_str.split('');for(vari = 1; i <= text_arr.length; i++) {if(text_arr.length * width < max_width) {new_str_obj[j] = temp_strtemp_str ='';break;}elseif(i * width <= max_width && (i + 1) * width > max_width){varsub_str = temp_str.substring(0, i);if(suffix&&level == j+1)new_str_obj[j] = sub_str + suffix;elsenew_str_obj[j] = sub_strtemp_str = temp_str.substring(i);}}}returnnew_str_obj;}在canvas中使用时候要用先测量每个字占用多少px，字体发小不一样占用的px就不同。
//单个字体占位距离varsolo_width = ctx.measureText('测').widthvar sub_str = '欢迎你呀';//文字域最大宽度 单位pxconst width_max ='50';varsub_str = sub_str(addr,solo_width,width_max,5,'...');ctx.fillStyle ='#5a6373';for(variinsub_str){varheight = 172 + i * solo_widthctx.fillText(sub_str[i], 23, height)}measureText，长了就换行，需要自己计算一下下呢