详解微信小程序-canvas绘制文字实现自动换行


Posted in Javascript onApril 26, 2019

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为

详解微信小程序-canvas绘制文字实现自动换行

我们只能设置文本的最大宽度,这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。

1 wxml代码

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

 2 wxss代码

canvas {
 width: 99%;
 height: 600rpx;
}

3 js代码

Page({
 data: {

 },
 onLoad: function (options) {
  const context = wx.createCanvasContext('myCanvas')
  var text = '这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷';//这是要绘制的文本
  var chr =text.split("");//这个方法是将一个字符串分割成字符串数组
  var temp = "";
  var row = [];
  context.setFontSize(18)
  context.setFillStyle("#000")
  for (var a = 0; a < chr.length; a++) {
   if (context.measureText(temp).width < 250) {
    temp += chr[a];
   }
   else {
    a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
    row.push(temp);
    temp = "";
   }
  }
  row.push(temp); 

  //如果数组长度大于2 则截取前两个
  if (row.length > 2) {
   var rowCut = row.slice(0, 2);
   var rowPart = rowCut[1];
   var test = "";
   var empty = [];
   for (var a = 0; a < rowPart.length; a++) {
    if (context.measureText(test).width < 220) {
     test += rowPart[a];
    }
    else {
     break;
    }
   }
   empty.push(test);
   var group = empty[0] + "..."//这里只显示两行,超出的用...表示
   rowCut.splice(1, 1, group);
   row = rowCut;
  }
  for (var b = 0; b < row.length; b++) {
   context.fillText(row[b], 10, 30 + b * 30, 300);
  }
  context.draw()  
 } 
})

4 效果展示

添加了a- -和没有a- -的对比

详解微信小程序-canvas绘制文字实现自动换行

以上就是换行的方法,如果想设置为不换行超出用省略号显示,也可参照上面的方法,将数组截取为一行再设置,道理是一样的。

以上所述是小编给大家介绍的微信小程序canvas绘制文字实现自动换行详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 学习技巧总结
May 21 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 #Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 #Javascript
JS异步错误捕获的一些事小结
Apr 26 #Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 #Javascript
vue请求本地自己编写的json文件的方法
Apr 25 #Javascript
You might like
快速开发一个PHP扩展图文教程
2008/12/12 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP时间函数使用详解
2019/03/21 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python中使用while循环的实例
2019/08/05 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
法雷奥SQA(electric)面试问题
2016/01/23 面试题
大学四年个人自我小结
2014/03/05 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
村党支部公开承诺书
2014/05/29 职场文书
八项规定对照检查材料
2014/08/31 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
写给领导的感谢信
2015/01/22 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
基于Python的EasyGUI学习实践
2021/05/07 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python