微信小程序跳

/**

* 画布文本换行绘制

* canvasContext 画布实例

* text 要写入的文本

* x 初始x轴位置

* y 初始y轴位置

* ySpacing 换行后,每行直接的间隔

* maxWidth 此文本写入画布的最大宽度,超过此宽度就换行

* color 文本颜色

* size 文本字体大小

* align 文本方向 left rigt center 额一直搞不清楚这个方向是怎么个原理

* @returns { textY 绘制最后一行文本的Y轴结束坐标,drawNum 画布本次绘制了几次 }

*/

canvasTextNewlinedraw (options) {

const { canvasContext, text = '', x = 0, y = 0, ySpacing = 0, maxWidth = 0, color, size, align } = options

return new Promise((resolve, reject) => {

size && canvasContext.setFontSize(size)

align && canvasContext.setTextAlign(align)

color && canvasContext.setFillStyle(color)

const textList = text.split('')

let currText = '', textY = 0, drawNum = 0

for (let i = 0; i < textList.length; i++) {

if (canvasContext.measureText(currText + textList[i]).width + x > maxWidth - 10) {

textY += textY === 0 ? y : ySpacing

canvasContext.fillText(currText, x, textY)

currText = textList[i]

drawNum++

} else {

currText += textList[i]

}

}

textY = textY === 0 ? y : textY + ySpacing

canvasContext.fillText(currText, x, textY)

drawNum++

canvasContext.draw(true, _ => {

setTimeout(() => {

resolve({ y: textY, res: _, drawNum })

}, 100)

})

})

}

相关推荐
paopaokaka_luck3 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所5 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck5 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场7 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld7 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json7 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球9 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域11 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域14 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero20 小时前
微信小程序71~80
微信小程序·小程序