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

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

我们只能设置文本的最大宽度，这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示，光靠这个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绘制文字实现自动换行详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序实现简单表格

    微信小程序实现简单表格

    本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下 效果图: wxml <view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th "

  • 微信小程序制作表格的方法

    微信小程序制作表格的方法

    本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 <view class="table"> <view class="tr bg-w"> <view class="th">参数</view> <view class="th-2">内

  • JS绘制微信小程序画布时钟

    JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • 一秒学会微信小程序制作table表格

    一秒学会微信小程序制作table表格

    大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="t

  • 微信小程序实现的绘制table表格功能示例

    本文实例讲述了微信小程序实现的绘制table表格功能.分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:['"", "1周", "2周", "3周", "总计"], endwise1: "游泳", tb1:"0", tb2:"0", tb3:"0", tb4:"0"

  • 微信小程序实现横向增长表格的方法

    微信小程序实现横向增长表格的方法

    效果图如下所示: 下面给大家分享微信小程序横向增长表格的实例代码,代码如下所示: <view class='table'> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.day}}</view> </view> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.number}}

  • 微信小程序实现简易table表格

    微信小程序实现简易table表格

    本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下 由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</v

  • 详解微信小程序canvas圆角矩形的绘制的方法

    微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要 曲线救国 圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明

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

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

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w

  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下

  • 详解微信小程序 同步异步解决办法

    详解微信小程序 同步异步解决办法 小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

  • 详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • 详解微信小程序 相对定位和绝对定位

    详解微信小程序 相对定位和绝对定位

    详解微信小程序 相对定位和绝对定位 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位 相对定位: position:relative;    /*启用相对定位*/         left:150rpx;    /*相对于自己往右偏离150*/         top:50rpx;     /*相对于自己往下偏离150*/ 绝对定位: position: absolute;           left: 50rpx;         

随机推荐