app/uni_modules/lime-painter/components/l-painter/l-painter.vue

<template>
	<view class="lime-painter" ref="limepainter">
		<view v-if="canvasId && size" :style="styles">
			<!-- #ifndef APP-NVUE -->
			<canvas class="lime-painter__canvas" v-if="use2dCanvas" :id="canvasId" type="2d" :style="size"></canvas>
			<canvas class="lime-painter__canvas" v-else :id="canvasId" :canvas-id="canvasId" :style="size"
				:width="boardWidth * dpr" :height="boardHeight * dpr" :hidpi="hidpi"></canvas>

			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<web-view :style="size" ref="webview"
				src="/uni_modules/lime-painter/hybrid/html/index.html"
				class="lime-painter__canvas" @pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage">
			</web-view>
			<!-- #endif -->
		</view>
		<slot />
	</view>
</template>

<script>
	import { parent } from '../common/relation'
	import props from './props'
	import {toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo }from './utils';
	//  #ifndef APP-NVUE
	import { canIUseCanvas2d, isPC} from './utils';
	import Painter from './painter';
	// import Painter from '@painter'
	const nvue = {}
	//  #endif
	//  #ifdef APP-NVUE
	import nvue from './nvue'
	//  #endif
	export default {
		name: 'lime-painter',
		mixins: [props, parent('painter'), nvue],
		data() {
			return {
				use2dCanvas: false,
				canvasHeight: 150,
				canvasWidth: null,
				parentWidth: 0,
				inited: false,
				progress: 0,
				firstRender: 0,
				done: false,
				tasks: []
			};
		},
		computed: {
			styles() {
				return `${this.size}${this.customStyle||''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
			},
			canvasId() {
				return `l-painter${this._ && this._.uid || this._uid}`
			},
			size() {
				if (this.boardWidth && this.boardHeight) {
					return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
				}
			},
			dpr() {
				return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
			},
			boardWidth() {
				const {width = 0} = (this.elements && this.elements.css) || this.elements || this
				const w = toPx(width||this.width)
				return w || Math.max(w, toPx(this.canvasWidth));
			},
			boardHeight() {
				const {height = 0} = (this.elements && this.elements.css) || this.elements || this
				const h = toPx(height||this.height)
				return h || Math.max(h, toPx(this.canvasHeight));
			},
			hasBoard() {
				return this.board && Object.keys(this.board).length
			},
			elements() {
				return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
			}
		},
		created() {
			this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
		},
		async mounted() {
			await sleep(30)
			await this.getParentWeith()
			this.$nextTick(() => {
				setTimeout(() => {
					this.$watch('elements', this.watchRender, {
						deep: true,
						immediate: true
					});
				}, 30)
			})
		},
		// #ifdef VUE3
		unmounted() {
			this.done = false
			this.inited = false
			this.firstRender = 0
			this.progress = 0
			this.painter = null
			clearTimeout(this.rendertimer)
		},
		// #endif
		// #ifdef VUE2
		destroyed() {
			this.done = false
			this.inited = false
			this.firstRender = 0
			this.progress = 0
			this.painter = null
			clearTimeout(this.rendertimer)
		},
		// #endif
		methods: {
			async watchRender(val, old) {
				if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
				this.firstRender = 1
				this.progress = 0
				this.done = false
				clearTimeout(this.rendertimer)
				this.rendertimer = setTimeout(() => {
					this.render(val);
				}, this.beforeDelay)
			},
			async setFilePath(path, param) {
				let filePath = path
				const {pathType = this.pathType} =  param || this
				if (pathType == 'base64' && !isBase64(path)) {
					filePath = await pathToBase64(path)
				} else if (pathType == 'url' && isBase64(path)) {
					filePath = await base64ToPath(path)
				}
				if (param && param.isEmit) {
					this.$emit('success', filePath);
				}
				return filePath
			},
			async getSize(args) {
				const {width} = args.css || args
				const {height} = args.css || args
				if (!this.size) {
					if (width || height) {
						this.canvasWidth = width || this.canvasWidth
						this.canvasHeight = height || this.canvasHeight
						await sleep(30);
					} else {
						await this.getParentWeith()
					}
				}
			},
			canvasToTempFilePathSync(args) {
				// this.stopWatch && this.stopWatch()
				// this.stopWatch = this.$watch('done', (v) => {
				// 	if (v) {
				// 		this.canvasToTempFilePath(args)
				// 		this.stopWatch && this.stopWatch()
				// 	}
				// }, {
				// 	immediate: true
				// })
				this.tasks.push(args)
				if(this.done){
					this.runTask()
				}
			},
			runTask(){
				while(this.tasks.length){
					const task = this.tasks.shift()	
					 this.canvasToTempFilePath(task)
				}
			},
			// #ifndef APP-NVUE
			getParentWeith() {
				return new Promise(resolve => {
					uni.createSelectorQuery()
						.in(this)
						.select(`.lime-painter`)
						.boundingClientRect()
						.exec(res => {
							const {width, height} = res[0]||{}
							this.parentWidth = Math.ceil(width||0)
							this.canvasWidth = this.parentWidth || 300
							this.canvasHeight = height || this.canvasHeight||150
							resolve(res[0])
						})
				})
			},
			async render(args = {}) {
				if(!Object.keys(args).length) {
					return console.error('空对象')
				}
				this.progress = 0
				this.done = false
				// #ifdef APP-NVUE
				this.tempFilePath.length = 0
				// #endif
				await this.getSize(args)
				const ctx = await this.getContext();
				
				let {
					use2dCanvas,
					boardWidth,
					boardHeight,
					canvas,
					afterDelay
				} = this;
				if (use2dCanvas && !canvas) {
					return Promise.reject(new Error('canvas 没创建'));
				}
				this.boundary = {
					top: 0,
					left: 0,
					width: boardWidth,
					height: boardHeight
				};
				this.painter = null
				if (!this.painter) {
					const {width} = args.css || args
					const {height} = args.css || args
					if(!width && this.parentWidth) {
						Object.assign(args, {width: this.parentWidth})
					}
					const param = {
						context: ctx,
						canvas,
						width: boardWidth,
						height: boardHeight,
						pixelRatio: this.dpr,
						useCORS: this.useCORS,
						createImage: getImageInfo.bind(this),
						performance: this.performance,
						listen: {
							onProgress: (v) => {
								this.progress = v
								this.$emit('progress', v)
							},
							onEffectFail: (err) => {
								this.$emit('faill', err)
							}
						}
					}
					this.painter = new Painter(param)
				} 
				try{
					// vue3 赋值给data会引起图片无法绘制
					const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
					this.boundary.height = this.canvasHeight = height
					this.boundary.width = this.canvasWidth = width
					await sleep(this.sleep);
					await this.painter.render()
					await new Promise(resolve => this.$nextTick(resolve));
					if (!use2dCanvas) {
						await this.canvasDraw();
					}
					if (afterDelay && use2dCanvas) {
						await sleep(afterDelay);
					}
					this.$emit('done');
					this.done = true
					if (this.isCanvasToTempFilePath) {
						this.canvasToTempFilePath()
							.then(res => {
								this.$emit('success', res.tempFilePath)
							})
							.catch(err => {
								this.$emit('fail', new Error(JSON.stringify(err)));
							});
					}
					this.runTask()
					return Promise.resolve({
						ctx,
						draw: this.painter,
						node: this.node
					});
				}catch(e){
					//TODO handle the exception
				}
				
			},
			canvasDraw(flag = false) {
				return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
					.afterDelay)));
			},
			async getContext() {
				if (!this.canvasWidth) {
					this.$emit('fail', 'painter no size')
					console.error('[lime-painter]: 给画板或父级设置尺寸')
					return Promise.reject();
				}
				if (this.ctx && this.inited) {
					return Promise.resolve(this.ctx);
				}
				const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
				const _getContext = () => {
					return new Promise(resolve => {
						uni.createSelectorQuery()
							.in(this)
							.select(`#${this.canvasId}`)
							.boundingClientRect()
							.exec(res => {
								if (res) {
									const ctx = uni.createCanvasContext(this.canvasId, this);
									if (!this.inited) {
										this.inited = true;
										this.use2dCanvas = false;
										this.canvas = res;
									}
									
									// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
									if (!ctx.measureText) {
										function strLen(str) {
											let len = 0;
											for (let i = 0; i < str.length; i++) {
												if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
													len++;
												} else {
													len += 2;
												}
											}
											return len;
										}
										ctx.measureText = text => {
											let fontSize = ctx.state && ctx.state.fontSize || 12;
											const font = ctx.__font
											if (font && fontSize == 12) {
												fontSize = parseInt(font.split(' ')[3], 10);
											}
											fontSize /= 2;
											return {
												width: strLen(text) * fontSize
											};
										}
									}
									
									// #ifdef MP-ALIPAY
									ctx.scale(dpr, dpr);
									// #endif
									this.ctx = ctx
									resolve(this.ctx);
								} else {
									console.error('[lime-painter] no node')
								}
							});
					});
				};
				if (!use2dCanvas) {
					return _getContext();
				}
				return new Promise(resolve => {
					uni.createSelectorQuery()
						.in(this)
						.select(`#${this.canvasId}`)
						.node()
						.exec(res => {
							let {node: canvas} = res && res[0]||{};
							if(canvas) {
								const ctx = canvas.getContext(type);
								if (!this.inited) {
									this.inited = true;
									this.use2dCanvas = true;
									this.canvas = canvas;
								}
								this.ctx = ctx
								resolve(this.ctx);
							} else {
								console.error('[lime-painter]: no size')
							}
						});
				});
			},
			canvasToTempFilePath(args = {}) {
				return new Promise(async (resolve, reject) => {
					const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
					const success = async (res) => {
						try {
							const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
							const result = Object.assign(res, {tempFilePath})
							args.success && args.success(result)
							resolve(result)
						} catch (e) {
							this.$emit('fail', e)
						}
					}
					
					let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
					// let destWidth = width * dpr;
					// let destHeight = height * dpr;
					// #ifdef MP-ALIPAY
					// width = destWidth;
					// height = destHeight;
					// #endif
					
					const copyArgs = Object.assign({
						// x,
						// y,
						// width,
						// height,
						// destWidth,
						// destHeight,
						canvasId,
						id: canvasId,
						fileType,
						quality,
					}, args, {success});
					// if(this.isPC || use2dCanvas) {
					// 	copyArgs.canvas = this.canvas
					// }
					if (use2dCanvas) {
						copyArgs.canvas = this.canvas
						try{
							// #ifndef MP-ALIPAY
							const oFilePath = this.canvas.toDataURL(`image/${args.fileType||fileType}`.replace(/pg/, 'peg'), args.quality||quality)
							if(/data:,/.test(oFilePath)) {
								uni.canvasToTempFilePath(copyArgs, this);
							} else {
								const tempFilePath = await this.setFilePath(oFilePath, args)
								args.success && args.success({tempFilePath})
								resolve({tempFilePath})
							}
							// #endif
							// #ifdef MP-ALIPAY
							this.canvas.toTempFilePath(copyArgs)
							// #endif
						}catch(e){
							args.fail && args.fail(e)
							reject(e)
						}
					} else {
						// #ifdef MP-ALIPAY
						if(this.ctx.toTempFilePath) {
							// 钉钉
							const ctx = uni.createCanvasContext(canvasId);
							ctx.toTempFilePath(copyArgs);
						} else {
							my.canvasToTempFilePath(copyArgs);
						}
						// #endif
						// #ifndef MP-ALIPAY
						uni.canvasToTempFilePath(copyArgs, this);
						// #endif
					}
				})
			}
			// #endif
		}
	};
</script>
<style>
	.lime-painter,
	.lime-painter__canvas {
		// #ifndef APP-NVUE
		width: 100%;
		// #endif
		// #ifdef APP-NVUE
		flex: 1;
		// #endif
	}
</style>