微信小程序生成海报分享: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.length
return y + (_len - 1) * 20
},
分类:
微信小程序/微信/阿里云相关开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
2018-04-24 vue项目中使用地图组件