微信小程序中的canvas 文字断行和省略号显示功能的处理方法


Posted in Javascript onNovember 14, 2018

文字的多行处理在dom元素中很好办。但是canvas中没有提供方法,只有通过截取指定字符串来达到目的。

那么下面就介绍我自己处理的办法:

wxml:

<canvas canvas-id='word' id='test'></canvas>

canvas肯定要一个画板容器啦,记得设置宽高哦,小程序中默认宽高是300px和150px

js:在page中

//处理文字多出省略号显示
  dealWords: function (options) {
    options.ctx.setFontSize(options.fontSize);//设置字体大小
    var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
    var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比,谁小就用谁做循环次数
    var endPos = 0;//当前字符串的截断点
    for (var j = 0; j < count; j++) {
      var nowStr = options.word.slice(endPos);//当前剩余的字符串
      var rowWid = 0;//每一行当前宽度  
      if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度,然后开始截取
        for (var m = 0; m < nowStr.length; m++) {
          rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
          if (rowWid > options.maxWidth) {            
            if (j === options.maxLine - 1) { //如果是最后一行
              options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);  //(j+1)*18这是每一行的高度    
            } else {
              options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
            }
            endPos += m;//下次截断点
            break;
          }
        }
      } else {//如果当前的字符串宽度小于最大宽度就直接输出
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
      }
    }
  },

(1) measureText().width 这是小程序 测量文本尺寸信息的方法,目前仅返回文本宽度。这里是官方说明

(2) (j + 1) * 18   中18表示每一行行高是18,这是我自己定义的行高如果这个数值小于定义的字体大小,多半会出现两行文字重叠的现象,前面的 j+1 表示当前是多少行。整体表示当前行与上一行相比需要加多少距离

(3) 在 j===options.maxLine-1 这个表示最后一行的处理情况里面   有slice(0,endPos-1),为什么这里要减一,是因为省略号也要占宽度,大概是11.5的样子,所以要减掉这个省略号的宽度。因为一般中文字符宽度都和设置的字体大小差不多。如果是英文就要小一点,这里就没有考虑这么精细了。反正减一就是精确度的意思。。。可以自行多减或者少减

(4) endPos += m 表示下一次截断的时候是从哪里开始。因为每次去截字符串都是最初的字符串,并没有真正意义上的截断一次之后就是剩下的字符串了,所以要把每次截断的点和上一次截断的点加上,才是最新一次字符串截断的位置。

(5) 循环和判断使用的有点多,不知道对性能有没有影响。。。。。。

调用的时候:

var ctx = wx.createCanvasContext('word');
var name='窗前明月光,疑是地上霜,举头望明月,低头思故乡。';
this.dealWords({
  ctx: ctx,//画布上下文
  fontSize: 16,//字体大小
  word: name,//需要处理的文字
  maxWidth: 100,//一行文字最大宽度
  x: 0,//文字在x轴要显示的位置
  y: 0,//文字在y轴要显示的位置
  maxLine: 3//文字最多显示的行数
})
ctx.draw();

 (1) 这个方法能够处理一行或者多行的情况,就看maxLine设置的大小了。当然如果设置maxLine为0或者-1,就会不显示的。。。

看一下效果:

微信小程序中的canvas 文字断行和省略号显示功能的处理方法

(1) canvas我设置的是200 * 200的大小,其它的设置就是上面调用的时候设置的

微信小程序中的canvas 文字断行和省略号显示功能的处理方法

(1) 这是当maxWidth设置为200px的时候的显示情况。

总结

以上所述是小编给大家介绍的微信小程序中的canvas 文字断行和省略号显示功能的处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 #Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 #Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 #Javascript
Vue源码探究之状态初始化
Nov 14 #Javascript
vue使用laydate时间插件的方法
Nov 14 #Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 #Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 #Javascript
You might like
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php跨服务器访问方法小结
2015/05/12 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
会计专业的自荐信
2013/12/12 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
九年级政治教学反思
2014/02/06 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python