收藏
回答

画布如何绘制多行文字

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 canvas 客户端 6.7.2 2.2.2

- 需求的场景描述(希望解决的问题)

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

- 希望提供的能力

canvas支持写入文字换行。

最后一次编辑于  2018-08-22  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

2 个回答

  • 卢霄霄
    卢霄霄
    2018-08-22

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

    2018-08-22
    赞同
    回复
  • 小波
    小波
    01-23

    针对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)
       }


    01-23
    赞同
    回复