• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序Canvas绘制文字(换行和省略号)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序Canvas绘制文本时要实现换行和超出部分显示为省略号

主要使用的API(详见微信文档):
CanvasContext.measureText
CanvasContext.fillText

// 文本2行换行与显示省略号
// 1、canvas对象 2、文本 3、X轴 4、Y轴 5、单行行高 6、文本的宽度
drawText(ctx, str, axisX, axisY,titleHeight, maxWidth) {
  // 字体
  ctx.setFontSize(14*this.rpx)
  // 颜色
  ctx.setFillStyle("#353535")
  // 文本处理
  let strArr = str.split("");
  let row = [];
  let temp = "";
  for (let i = 0; i < strArr.length; i++) {
    if (ctx.measureText(temp).width < maxWidth) {
      temp += strArr[i];
    }else {
      i--; //这里添加了i-- 是为了防止字符丢失,效果图中有对比
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp); // row有多少项则就有多少行

  //如果数组长度大于2,现在只需要显示两行则只截取前两项,把第二行结尾设置成\'...\'
  if (row.length > 2) {
    let rowCut = row.slice(0, 2);
    let rowPart = rowCut[1];
    let test = "";
    let empty = [];
    for (let i = 0; i < rowPart.length; i++) {
      if (ctx.measureText(test).width < maxWidth) {
        test += rowPart[i];
      }
      else {
        break;
      }
    }
    empty.push(test);
    let group = empty[0] + "..."//这里只显示两行,超出的用...表示
    rowCut.splice(1, 1, group);
    row = rowCut;
  }
  // 把文本绘制到画布中
  for (let i = 0; i < row.length; i++) {
    // 一次渲染一行
    ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);
  }
  // 保存当前画布状态
  ctx.save()
  // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
  ctx.draw()
},

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 小白入门踩坑发布时间:2022-07-18
下一篇:
微信小程序,授权登录,缓存发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap