主要思路:

  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. web移动端浮层滚动阻止window窗体滚动JS/CSS处理

    CSS代码: .noscroll, .noscroll body { overflow: hidden; } .noscroll body { position: relative; } JS代码: ...

  2. jquery|js|jq常用正则

    var mobReg=/^1[34578]\d{9}$/; //手机号 if (!mobReg.test(mob)) { mui.alert("请填写正确手机号!"," ...

  3. python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性

    python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性 inspect import inspect def fun(): pass inspect.ism ...

  4. Java中CardLayout布局方式的应用

    import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...

  5. bootstrap-fileinput文件上传控件的亲身实践

    经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错.赶紧就撸起来了. 1.下载压缩包.插件地址https://githu ...

  6. Hystrix快速入门

    祝大家国庆快乐! 对大部分电商和快递公司来说,每年年底(Q4季度)由于双11等大促活动的存在,将面对大量的用户流量,尤其是属于大促的那几天,无论是用户的商品订单还是物流订单,都将是平时的3倍以上.对于 ...

  7. 上海市2019年公务员录用考试第一轮首批面试名单(A类)

    上海市2019年公务员录用考试第一轮首批面试名单(A类) 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 4016574 127.4 5112479 145.9 5125732 ...

  8. String,StringBuffer与StringBuilder的区别|线程安全与线程不安全

    https://www.cnblogs.com/xingzc/p/6277581.html

  9. 自己总结的C#编码规范--4.注释篇

    注释 注释毫无疑问是让别人以最快速度了解你代码的最快途径,但写注释的目的绝不仅仅是"解释代码做了什么",更重要的尽量帮助代码阅读者对代码了解的和作者一样多. 当你写代码时,你脑海里 ...

  10. async函数

    async函数的实现原理,就是将Generator函数和自动执行器,包装在一个函数里.async函数返回Promise对象,async函数的return值是then方法的参数,await后跟Promi ...