主要思路:

  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. 2018牛客网暑假ACM多校训练赛(第五场)F take 树状数组,期望

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round5-F.html 题目传送门 - https://www.no ...

  2. 用面向对象重写thread 实现多次调用一个线程

    思路: 利用thread类中,run方法在子线程中调用,其他方法在主线程调用,所以将生产者写入主线程,将消费者写入run函数中在子线程中执行,完成生产者消费者模型 注意: 1. 要在 init 函数中 ...

  3. group by 和where 条件后面不能用刚设置的别名。

    select count(*),c_xy_bj a from z_user group by c_xy_bj     这个group by后面不能使用c_xy_bj 字段的别名a,只有外面再嵌套sel ...

  4. Fire! -两次dfs

    题目描述: Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of ...

  5. BroadcastReceiver工作原理

    --摘自<android插件化开发指南> 1.动态注册过程是注册Receiver并通知AMS,发送内容包括IntentFilter.一个实现了IIntentReceiver接口的Binde ...

  6. asp.net core 依赖注入实现全过程粗略剖析(1)

    转载请注明出处: https://home.cnblogs.com/u/zhiyong-ITNote/ 常用扩展方法 注入依赖服务: new ServiceCollection().AddSingle ...

  7. BZOJ.4199.[NOI2015]品酒大会(后缀自动机 树形DP)

    BZOJ 洛谷 后缀数组做法. 洛谷上SAM比SA慢...BZOJ SAM却能快近一倍... 只考虑求极长相同子串,即所有后缀之间的LCP. 而后缀的LCP在后缀树的LCA处.同差异这道题,在每个点处 ...

  8. 【开源GPS追踪】 之 手机端安卓版

    GPS追踪,后台是利用的是开源的Opengts,可以通过web方式浏览位置信息.这里介绍一款手机端软件go Tracker. 这款软件是在Google app 上找到的,目前还没有找到源码,用了几天有 ...

  9. [USACO18DEC]The Cow Gathering

    Description: 给定一棵树,每次删去叶子,有m个限制,分别为(a,b)表示a需要比b先删,为每个点能否成为最后被删的点 Hint: \(n,m \le 10^5\) Solution: 手模 ...

  10. BZOJ2167 : 公交车站

    设$f[i]$表示$i$往上通过一趟公交车能到达的深度最小的祖先,这可以通过将公交车按$lca$深度从小到大排序后用并查集染色得到. 对于每个询问: $1.x==y$ $ans=0$. $2.x$是$ ...