微信小程序跳

/**

* 画布文本换行绘制

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

})

})

}

相关推荐
2501_9159184132 分钟前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾2 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字2 小时前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台
じòぴé南冸じょうげん2 小时前
微信小程序如何进行分包处理?
前端·小程序
说私域4 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源
毕设源码-邱学长20 小时前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue21 小时前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby1 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro