详解微信小程序-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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
js实现点击烟花特效
Oct 14 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php实现文件下载代码分享
2014/08/19 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python之pymysql的使用小结
2019/07/01 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python suds访问webservice服务实现
2020/06/26 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
我与祖国共奋进演讲稿
2014/09/13 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电