tongan-points-h5/uni_modules/lime-signature/components/l-signature/l-signature.vue

<template>
	<view class="lime-signature" :style="[canvasStyle, styles]" ref="limeSignature">
		<!-- #ifndef APP-VUE || APP-NVUE -->
		<canvas v-if="useCanvas2d" class="lime-signature__canvas" :id="canvasId" type="2d"
			:disableScroll="disableScroll" @touchstart="touchStart" @touchmove="touchMove"
			@touchend="touchEnd"></canvas>
		<canvas v-else :disableScroll="disableScroll" class="lime-signature__canvas" :canvas-id="canvasId"
			:id="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="touchStart"
			@mousemove="touchMove" @mouseup="touchEnd"></canvas>
		<!-- #endif -->
		<!-- #ifdef APP-VUE -->
		<view :id="canvasId" :disableScroll="disableScroll" :rparam="param" :change:rparam="sign.update"
			:rclear="rclear" :change:rclear="sign.clear" :rundo="rundo" :change:rundo="sign.undo" :rsave="rsave"
			:change:rsave="sign.save" :rempty="rempty" :change:rempty="sign.isEmpty"></view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<web-view src="/uni_modules/lime-signature/static/index.html" class="lime-signature__canvas" ref="webview"
			@pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage"></web-view>
		<!-- #endif -->
	</view>
</template>
<!-- #ifdef APP-VUE -->
<script module="sign" lang="renderjs">
	// #ifdef APP-VUE 
	// import { Signature } from '@signature'
	import {
		Signature
	} from './signature'
	// import {base64ToPath} from './utils'

	export default {
		data() {
			return {
				canvasid: null,
				signature: null,
				observer: null,
				options: {},
				saveCount: 0,
			}
		},
		mounted() {
			this.$nextTick(this.init)
		},
		methods: {
			init() {
				const el = this.$refs.limeSignature;
				const canvas = document.createElement('canvas')
				canvas.style = 'width:100%; height: 100%;'
				el.appendChild(canvas)
				this.signature = new Signature({
					el: canvas
				})
				this.signature.pen.setOption(this.options)
				const width = this.signature.canvas.get('width')
				const height = this.signature.canvas.get('height')

				this.emit({
					changeSize: {
						width,
						height
					}
				})
			},
			undo(v) {
				if (v && this.signature) {
					this.signature.undo()
				}
			},
			clear(v) {
				if (v && this.signature) {
					this.signature.clear()
				}
			},
			save(v) {
				if (v !== this.saveCount) {
					this.saveCount = v;
					const image = this.signature.canvas.get('el').toDataURL()
					const {
						backgroundColor
					} = this.options
					if (backgroundColor) {
						const canvas = document.createElement('canvas')
						const width = this.signature.canvas.get('width')
						const height = this.signature.canvas.get('height')
						const pixelRatio = this.signature.canvas.get('pixelRatio')
						canvas.width = width * pixelRatio
						canvas.height = height * pixelRatio
						const context = canvas.getContext('2d')
						context.scale(pixelRatio, pixelRatio)
						context.fillStyle = backgroundColor
						context.fillRect(0, 0, width, height)
						context.drawImage(this.signature.canvas.get('el'), 0, 0, width, height)
						this.emit({
							save: canvas.toDataURL()
						})
						canvas.remove()
					} else {
						this.emit({
							save: image
						})
					}



					// base64ToPath(image).then((res) => {
					// 	this.emit({save: res})
					// })
				}
			},
			isEmpty(v) {
				if (v && this.signature) {
					const isEmpty = this.signature.isEmpty()
					this.emit({
						isEmpty
					})
				}
			},
			emit(event) {
				this.$ownerInstance.callMethod('onMessage', {
					detail: {
						data: [{
							event
						}]
					}
				})
			},
			update(v) {
				if (v) {
					if (this.signature) {
						this.options = v
						this.signature.pen.setOption(v)
					} else {
						this.options = v
					}
				}
			}
		}
	}
	// #endif
</script>
<!-- #endif -->


<script>
	// #ifndef APP-NVUE
	import {
		getCanvas2d,
		wrapEvent,
		requestAnimationFrame,
		sleep
	} from './utils'
	import {
		Signature
	} from './signature'
	// import {Signature} from '@signature';
	import {
		uniContext,
		createImage,
		toDataURL
	} from './context'
	// #endif
	import {
		base64ToPath
	} from './utils'
	export default {
		props: {
			styles: String,
			disableScroll: Boolean,
			type: {
				type: String,
				default: '2d'
			},
			// 画笔颜色
			penColor: {
				type: String,
				default: 'black'
			},
			penSize: {
				type: Number,
				default: 2
			},
			// 画板背景颜色
			backgroundColor: String,
			// 笔锋
			openSmooth: Boolean,
			// 画笔最小值
			minLineWidth: {
				type: Number,
				default: 2
			},
			// 画笔最大值
			maxLineWidth: {
				type: Number,
				default: 6
			},
			// 画笔达到最小宽度所需最小速度(px/ms)，取值范围1.0-10.0，值越小，画笔越容易变细，笔锋效果会比较明显，可以自行调整查看效果，选出自己满意的值。
			minSpeed: {
				type: Number,
				default: 1.5
			},
			// 相邻两线宽度增(减)量最大百分比，取值范围1-100，为了达到笔锋效果，画笔宽度会随画笔速度而改变，如果相邻两线宽度差太大，过渡效果就会很突兀，使用maxWidthDiffRate限制宽度差，让过渡效果更自然。可以自行调整查看效果，选出自己满意的值。
			maxWidthDiffRate: {
				type: Number,
				default: 20
			},
			// 限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能
			maxHistoryLength: {
				type: Number,
				default: 20
			},
			beforeDelay: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				canvasWidth: null,
				canvasHeight: null,
				useCanvas2d: true,
				// #ifdef APP-PLUS
				rclear: 0,
				rundo: 0,
				rsave: 0,
				rempty: 0,
				risEmpty: true,
				toDataURL: null,
				tempFilePath: [],
				// #endif
			}
		},
		computed: {
			canvasId() {
				return `lime-signature${this._uid||this._.uid}`
			},
			canvasStyle() {
				const {
					canvasWidth,
					canvasHeight,
					backgroundColor
				} = this
				return {
					width: canvasWidth && (canvasWidth + 'px'),
					height: canvasHeight && (canvasHeight + 'px'),
					background: backgroundColor
				}
			},
			param() {
				const {
					penColor,
					penSize,
					backgroundColor,
					openSmooth,
					minLineWidth,
					maxLineWidth,
					minSpeed,
					maxWidthDiffRate,
					maxHistoryLength,
					disableScroll
				} = this
				return JSON.parse(JSON.stringify({
					penColor,
					penSize,
					backgroundColor,
					openSmooth,
					minLineWidth,
					maxLineWidth,
					minSpeed,
					maxWidthDiffRate,
					maxHistoryLength,
					disableScroll
				}))
			}
		},
		// #ifdef APP-NVUE
		watch: {
			param(v) {
				this.$refs.webview.evalJS(`update(${JSON.stringify(v)})`)
			}
		},
		// #endif
		// #ifndef APP-PLUS
		created() {
			this.useCanvas2d = this.type === '2d' && getCanvas2d()
		},
		// #endif
		// #ifndef APP-PLUS
		async mounted() {
			if (this.beforeDelay) {
				await sleep(this.beforeDelay)
			}
			const config = await this.getContext()
			this.signature = new Signature(config)
			this.canvasEl = this.signature.canvas.get('el')
			this.canvasWidth = this.signature.canvas.get('width')
			this.canvasHeight = this.signature.canvas.get('height')

			this.stopWatch = this.$watch('param', (v) => {
				this.signature.pen.setOption(v)
			}, {
				immediate: true
			})
		},
		// #endif
		// #ifndef APP-PLUS
		// #ifdef VUE3
		beforeUnmount() {
			this.stopWatch()
			this.signature.destroy()
		},
		// #endif
		// #ifdef VUE2
		beforeDestroy() {
			this.stopWatch()
			this.signature.destroy()
		},
		// #endif
		// #endif
		methods: {
			// #ifdef APP-PLUS
			onPageFinish() {
				this.$refs.webview.evalJS(`update(${JSON.stringify(this.param)})`)
			},
			onMessage(e = {}) {
				const {
					detail: {
						data: [res]
					}
				} = e
				if (res.event?.save) {
					this.toDataURL = res.event.save
				}
				if (res.event?.changeSize) {
					const {
						width,
						height
					} = res.event.changeSize
				}
				if (res.event.hasOwnProperty('isEmpty')) {
					this.risEmpty = res.event.isEmpty
				}
				if (res.event?.file) {
					this.tempFilePath.push(res.event.file)
					if (this.tempFilePath.length > 7) {
						this.tempFilePath.shift()
					}
					return
				}
				if (res.event?.success) {
					if (res.event.success) {
						this.tempFilePath.push(res.event.success)
						if (this.tempFilePath.length > 8) {
							this.tempFilePath.shift()
						}
						this.toDataURL = this.tempFilePath.join('')
						this.tempFilePath = []
						// base64ToPath(this.tempFilePath.join('')).then(res => {

						// })
					} else {
						this.$emit('fail', 'canvas no data')
					}
					return
				}
			},
			// #endif
			undo() {
				// #ifdef APP-VUE || APP-NVUE
				this.rundo += 1
				// #endif
				// #ifdef APP-NVUE
				this.$refs.webview.evalJS(`undo()`)
				// #endif
				// #ifndef APP-VUE
				if (this.signature)
					this.signature.undo()
				// #endif
			},
			clear() {
				// #ifdef APP-VUE || APP-NVUE
				this.rclear += 1
				// #endif
				// #ifdef APP-NVUE
				this.$refs.webview.evalJS(`clear()`)
				// #endif
				// #ifndef APP-VUE
				if (this.signature)
					this.signature.clear()
				// #endif
			},
			isEmpty() {
				// #ifdef APP-NVUE
				this.$refs.webview.evalJS(`isEmpty()`)
				// #endif
				// #ifdef APP-VUE || APP-NVUE
				this.rempty += 1
				// #endif
				// #ifndef APP-VUE || APP-NVUE
				return this.signature.isEmpty()
				// #endif
			},
			canvasToTempFilePath(param) {
				const isEmpty = this.isEmpty()
				// #ifdef APP-NVUE
				this.$refs.webview.evalJS(`save()`)
				// #endif
				// #ifdef APP-VUE || APP-NVUE
				const stopURLWatch = this.$watch('toDataURL', (v, n) => {
					if (v && v !== n) {
						if (param.pathType == 'url') {
							base64ToPath(v).then(res => {
								param.success({
									tempFilePath: res,
									isEmpty: this.risEmpty
								})
							})
						} else {
							param.success({
								tempFilePath: v,
								isEmpty: this.risEmpty
							})
						}
						this.toDataURL = ''
					}
					stopURLWatch && stopURLWatch()
				})
				this.rsave += 1
				// #endif
				// #ifndef APP-VUE || APP-NVUE
				const success = (success) => param.success && param.success(success)
				const fail = (fail) => param.fail && param.fail(err)
				const {
					canvas
				} = this.signature.canvas.get('el')
				const context = this.signature.canvas.get('context')
				const {
					backgroundColor
				} = this
				const width = this.signature.canvas.get('width')
				const height = this.signature.canvas.get('height')

				if (this.useCanvas2d) {
					try {
						// #ifndef MP-ALIPAY
						const tempFilePath = canvas.toDataURL()
						if (backgroundColor) {
							const image = canvas.createImage()
							image.src = tempFilePath
							image.onload = () => {
								context.fillStyle = backgroundColor
								context.fillRect(0, 0, width, height)
								context.drawImage(image, 0, 0, width, height);
								const tempFilePath = canvas.toDataURL()
								success({
									tempFilePath,
									isEmpty
								})
								context.clearRect(0, 0, width, height)
								context.drawImage(image, 0, 0, width, height);
							}
						} else {
							success({
								tempFilePath,
								isEmpty
							})
						}
						// #endif
						// #ifdef MP-ALIPAY
						canvas.toTempFilePath({
							canvasid: this.canvasid,
							success(res) {
								if (backgroundColor) {
									const image = canvas.createImage()
									image.src = tempFilePath
									image.onload = () => {
										canvas.toTempFilePath({
											canvasid: this.canvasid,
											success(res) {
												context.fillStyle = backgroundColor
												context.fillRect(0, 0, width, height)
												context.drawImage(image, 0, 0, width, height);
												success({
													tempFilePath,
													isEmpty
												})
												context.clearRect(0, 0, width, height)
												context.drawImage(image, 0, 0, width, height);
											}
										})

									}
								} else {
									success({
										tempFilePath: res,
										isEmpty
									})
								}
							},
							fail
						})
						// #endif
					} catch (err) {
						console.warn(err)
						fail(err)
					}
				} else {
					toDataURL(this.canvasId, this).then(res => {
						if (backgroundColor) {
							const image = createImage()
							image.src = res
							image.onload = () => {
								context.fillStyle = backgroundColor
								context.fillRect(0, 0, width, height)
								context.drawImage(image, 0, 0, width, height);
								context.draw && context.draw(true, () => {
									toDataURL(this.canvasId, this).then(res => {
										success({
											tempFilePath: res,
											isEmpty
										})
										context.clearRect(0, 0, width, height)
										context.drawImage(image, 0, 0, width, height);
										context.draw && context.draw(true)
									})
								});

							}
						} else {
							success({
								tempFilePath: res,
								isEmpty
							})
						}
					}).catch(err => {
						console.warn(err)
						fail(err)
					})
				}
				// #endif
			},
			// #ifndef APP-PLUS
			getContext() {
				const {
					pixelRatio
				} = uni.getSystemInfoSync()
				return new Promise(resolve => {
					if (this.useCanvas2d) {
						uni.createSelectorQuery().in(this)
							.select(`#${this.canvasId}`)
							.fields({
								node: true,
								size: true,
								rect: true,
							})
							.exec(res => {
								if (res) {
									const {
										width,
										height,
										node,
										left,
										top,
										right
									} = res[0]
									const context = node.getContext('2d')
									node.width = width * pixelRatio;
									node.height = height * pixelRatio;
									resolve({
										left,
										top,
										right,
										width,
										height,
										context,
										canvas: node,
										pixelRatio
									})
								}
							})
					} else {
						uni.createSelectorQuery().in(this)
							.select(`#${this.canvasId}`)
							.boundingClientRect()
							.exec(res => {
								if (res) {
									const {
										width,
										height,
										left,
										top,
										right
									} = res[0]
									const context = uniContext(uni.createCanvasContext(this.canvasId, this))
									const canvas = {
										createImage,
										toDataURL: () => toDataURL(this.canvasId, this),
										requestAnimationFrame
									}
									resolve({
										left,
										top,
										right,
										width,
										height,
										context,
										pixelRatio: 1,
										canvas
									})
								}
							})
					}
				})
			},
			touchStart(e) {
				if (!this.canvasEl) return
				this.isStart = true
				this.canvasEl.dispatchEvent('touchstart', wrapEvent(e))
			},
			touchMove(e) {
				if (!this.canvasEl || !this.isStart && this.canvasEl) return
				this.canvasEl.dispatchEvent('touchmove', wrapEvent(e))
			},
			touchEnd(e) {
				if (!this.canvasEl) return
				this.isStart = false
				this.canvasEl.dispatchEvent('touchend', wrapEvent(e))
			},
			// #endif
		}
	}
</script>
<style lang="stylus">
	.lime-signature,
	.lime-signature__canvas {
		// #ifndef APP-NVUE
		width: 100%;
		height: 100% // #endif
			// #ifdef APP-NVUE
			flex: 1;
		// #endif}
</style>