详解微信小程序-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从头学起第二讲
Jul 04 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
小程序实现发表评论功能
Jul 06 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
如何基于JS截获动态代码
Dec 25 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抽象工厂模式(Elgg)
2010/03/21 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现月食效果实例代码
2019/06/18 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Django中的静态文件管理过程解析
2019/08/01 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
办公室主任岗位职责
2013/11/08 职场文书
校园公益广告语
2014/03/13 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
三八节祝酒词
2015/08/11 职场文书