微信小程序中的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之卸载鼠标事件的代码
May 14 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
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
PHP-FPM实现性能优化
2016/03/31 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
php实现简易计算器
2020/08/28 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
详解webpack进阶之loader篇
2017/08/23 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python动态监控日志内容的示例
2014/02/16 Python
python导入时小括号大作用
2017/01/10 Python
Python实现购物程序思路及代码
2017/07/24 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python 常用的基础函数
2018/07/10 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
详解Python3 pickle模块用法
2019/09/16 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
学习Python需要哪些工具
2020/09/04 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
倡议书范文格式
2014/05/12 职场文书
2014年市场部工作总结
2014/11/25 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
高二数学教学反思
2016/02/18 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android