yicangzongtai_app_240321/uni_modules/sakura-canvas/js_sdk/methods/canvas.js

import { sleep } from "../utils/common"

/**
 * canvas的一系列方法
 */
export default class Canvas {
	constructor(drawPoster) {
		this.drawPoster = drawPoster
	}
	/**
	 * 清空画布
	 */
	clearCanvas() {
		const { Context } = this.drawPoster
		Context.clearRect(0, 0, 999999, 999999)
	}
	/**
	 * 导出图片
	 * @returns 
	 */
	exportImage() {
		const { exportImageDelayTime, showExportImagesTips, exportImageTips } = this.drawPoster
		return new Promise(async resolve => {
			showExportImagesTips && uni.showLoading({ title: exportImageTips })
			await sleep(exportImageDelayTime)
			// 绘制图片
			resolve(await this.createCanvasFilePath())
		})
	}
	/**
	 * 创建canvas导出文件
	 * @returns 
	 */
	createCanvasFilePath() {
		const { Context, canvas, canvasId, _this, is2d, exportImageStyle, dpr, showExportImagesTips, showDrawTips } = this.drawPoster
		let { width, height, x, y, fileType, quality, destWidth, destHeight } = exportImageStyle
		const params = {}
		if (destWidth) {
			params.destWidth = destWidth
		}
		if (destHeight) {
			params.destHeight = destHeight
		}
		if (is2d) {
			width = width * dpr
			height = height * dpr
		}
		return new Promise(resolve => {
			try {
				// #ifdef MP-TOUTIAO || MP-ALIPAY
				if (is2d) {
					const url = Context.canvas.toDataURL()
					resolve({
						success: true,
						data: url,
						msg: '绘画成功'
					})
					return
				} else {
					// #ifdef MP-TOUTIAO
					params.destWidth = (params.destWidth ?? width) * dpr
					params.destHeight = (params.destHeight ?? height) * dpr
					// #endif
				}
				// #endif
				uni.canvasToTempFilePath({
					canvasId,
					canvas,
					x,
					y,
					width: Math.floor(width),
					height: Math.floor(height),
					quality,
					fileType,
					...params,
					success: res => {
						return resolve({
							success: true,
							data: res.tempFilePath,
							msg: '绘画成功'
						})
					},
					fail: err => {
						return resolve({
							success: false,
							msg: `导出图片失败: ${JSON.stringify(err)}`
						})
					}, 
					complete: () => {
						(showExportImagesTips || showDrawTips) && uni.hideLoading()
					}
				}, _this)
			} catch (e) {
				return resolve({
					success: false,
					msg: '导出图片失败: 绘画错误' + e
				})
			}
		})
	}
	/**
	 * 将绘制的内容绘制到画布上
	 * @returns 
	 */
	canvasDraw() {
		const { Context, drawDelayTime, is2d } = this.drawPoster
		return new Promise(async resolve => {
			await sleep(drawDelayTime)
			if (is2d) {
				return resolve(await this.exportImage())
			} else {
				await Context.draw(true, async () => {
					return resolve(await this.exportImage())
				})
			}
		})
	}
	/**
	 * 排序drawArray 根据数据的zIndex进行排序，修改渲染顺序
	 * @param { Array } drawArray 绘制内容
	 */
	sortDrawArray(drawArray = []) {
		return drawArray.sort((after, current) => {
			const aZIndex = after.zIndex || 0
			const cZIndex = current.zIndex || 0
			return aZIndex - cZIndex
		})
	}
}