50字范文,内容丰富有趣,生活中的好帮手!
50字范文 > 微信小程序生成海报分享:canvas绘制文字溢出如何换行

微信小程序生成海报分享:canvas绘制文字溢出如何换行

时间:2020-10-31 01:48:34

相关推荐

微信小程序生成海报分享:canvas绘制文字溢出如何换行

主要思路:

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

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

注意事项:

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。