主要思路:

  1、先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串

  2、计算另起的行总数,比如总共3行,也就是说将原来的一个长字符串按宽度分成了3行,然后循环绘制出这3行字符串即可。

注意事项:

  就是需要 a-- 那里,防止丢失字符的情况,假如不 a-- 的话,那么每换行时就会少一个字。

ctx.setFontSize()
ctx.fillStyle = "#000"
offsetHeight = that.drawArticle(ctx, item.title, width - , , offsetHeight) // 绘制文字自动换行
drawArticle(ctx, kl, width, x, y) {
let chr = kl.split('') // 分割为字符串数组
let temp = ''
let row = []
for (let a = ; a < chr.length; a++) {
if (ctx.measureText(temp).width < width) {
temp += chr[a]
} else {
a--
row.push(temp)
temp = ''
}
}
row.push(temp) for (var b = ; b < row.length; b++) {
// 控制最多显示2行
if (b < ) {
ctx.fillText(row[b], x, y + b * );
}
}
let _len = row.length > ? : row.length
return y + (_len - ) *
},

微信小程序生成海报分享:canvas绘制文字溢出如何换行的更多相关文章

  1. 用微信小程序开发的Canvas绘制可配置的转盘抽奖

    使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...

  2. 微信小程序的分享功能-css文字超过两行隐藏

    .info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...

  3. 微信小程序生成海报保存图片到相册小测试

    test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...

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

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  5. 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  6. 微信小程序中使用canvas

    微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...

  7. 微信小程序生成太阳码

    微信小程序生成太阳码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=access_token 必须通过POST提交 而且参数 ...

  8. mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  9. 小程序生成海报 canvas

    前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片 ...

随机推荐

  1. es 模块的基础知识,深度了解

    // 一模块的基础知识 /** * export :用于模块输出的出口 * import :文件引入的入口 */ // 1,第一种方式使用export方式输出 var a = 'a'; var b = ...

  2. DDoS攻击与防御(2)

    2.攻击系统资源终端设备在与服务器进行通信时,经常需要创建会话连接,在此过程中通常会使用TCP和SSL等协议.会话连接一旦被占满,新进入的会话请求就必须等待前面的会话完成.消耗系统资源的DDoS攻击的 ...

  3. 【官档整理】Visual Studio 2017 VS2017 中文离线安装包下载

    [官档整理]Visual Studio 2017 VS2017 中文离线安装包下载 转 https://blog.csdn.net/fromfire2/article/details/81104648 ...

  4. 关于使用jmeter函数助手生成随机数的使用方法

    记录自己的生活!   1.使用jmeter函数助手的生成随机数的方法,主要包含以下几个函数:     [_Random]     [_RandomString]   2.关于[_Random]函数的说 ...

  5. Codeforces Gym 101291C【优先队列】

    <题目链接> 题目大意: 就是一道纯模拟题,具体模拟过程见代码. 解题分析:要掌握不同优先级的优先队列的设置.下面是对优先队列的使用操作详解: priority_queue<int& ...

  6. Java内存管理-掌握类加载器的核心源码和设计模式(六)

    勿在流沙筑高台,出来混迟早要还的. 做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 上一篇文章介绍了类加载器分类以及类加载器的双亲委派模型,让我们能够从整体上对类加载器有 ...

  7. mybatis查询语句的背后之封装数据

    转载请注明出处... 一.前言 继上一篇mybatis查询语句的背后,这一篇主要围绕着mybatis查询的后期操作,即跟数据库交互的时候.由于本人也是一边学习源码一边记录,内容难免有错误或不足之处,还 ...

  8. python数据结构之栈

    栈 栈(stack),有些地方称为堆栈,是一种容器,可存入数据元素.访问元素.删除元素,它的特点在于只能允许在容器的一端(称为栈顶端指标,英语:top)进行加入数据(英语:push)和输出数据(英语: ...

  9. VMware5.5-高可用性和动态资源调度(DRS)

    高可用性 故障分类:ESX主机---虚拟机(主机通过vmtools监控)---应用程序(基本不用6.0新增了这一功能) 高可用的信号检测目前可分为两种 一.网络信号 二.存储信号 新建群集 上图的自定 ...

  10. python基础一 ------"有序"的字典

    "有序"字典:按照写入字典的先后顺序排序的字典(比list优点是按键查询) #-*-coding:utf-8 -*- #"有序"字典:按照写入字典的先后顺序排序 ...