微信小程序生成海报分享:canvas绘制文字溢出如何换行
主要思路:
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绘制文字溢出如何换行的更多相关文章
- 用微信小程序开发的Canvas绘制可配置的转盘抽奖
使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...
- 微信小程序的分享功能-css文字超过两行隐藏
.info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...
- 微信小程序生成海报保存图片到相册小测试
test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- 微信小程序中使用canvas
微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...
- 微信小程序生成太阳码
微信小程序生成太阳码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=access_token 必须通过POST提交 而且参数 ...
- mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`
用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...
- 小程序生成海报 canvas
前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片 ...
随机推荐
- web移动端浮层滚动阻止window窗体滚动JS/CSS处理
CSS代码: .noscroll, .noscroll body { overflow: hidden; } .noscroll body { position: relative; } JS代码: ...
- jquery|js|jq常用正则
var mobReg=/^1[34578]\d{9}$/; //手机号 if (!mobReg.test(mob)) { mui.alert("请填写正确手机号!"," ...
- python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性
python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性 inspect import inspect def fun(): pass inspect.ism ...
- Java中CardLayout布局方式的应用
import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...
- bootstrap-fileinput文件上传控件的亲身实践
经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错.赶紧就撸起来了. 1.下载压缩包.插件地址https://githu ...
- Hystrix快速入门
祝大家国庆快乐! 对大部分电商和快递公司来说,每年年底(Q4季度)由于双11等大促活动的存在,将面对大量的用户流量,尤其是属于大促的那几天,无论是用户的商品订单还是物流订单,都将是平时的3倍以上.对于 ...
- 上海市2019年公务员录用考试第一轮首批面试名单(A类)
上海市2019年公务员录用考试第一轮首批面试名单(A类) 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 4016574 127.4 5112479 145.9 5125732 ...
- String,StringBuffer与StringBuilder的区别|线程安全与线程不安全
https://www.cnblogs.com/xingzc/p/6277581.html
- 自己总结的C#编码规范--4.注释篇
注释 注释毫无疑问是让别人以最快速度了解你代码的最快途径,但写注释的目的绝不仅仅是"解释代码做了什么",更重要的尽量帮助代码阅读者对代码了解的和作者一样多. 当你写代码时,你脑海里 ...
- async函数
async函数的实现原理,就是将Generator函数和自动执行器,包装在一个函数里.async函数返回Promise对象,async函数的return值是then方法的参数,await后跟Promi ...