微信小程序跳

/**

* 画布文本换行绘制

* 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)

})

})

}

相关推荐
HERR_QQ19 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉2 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序