gxd-uni-library-editx 1.0.39 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gxd-uni-library-editx",
-  "version": "1.0.39",
+  "version": "1.0.44",
   "private": false,
   "description": "聚福宝基础插件专用库",
   "main": "index.js",

package/src/components/XdConfirm/XdConfirm.vue

@@ -31,29 +31,25 @@
         <slot>{{confirm.content}}</slot>
       </view>
       <view class="xd-input-confirm__body-btn">
-        <view>
+        <view v-if="confirm.cancel">
           <xd-button
             :font-size="32"
-            v-if="confirm.cancel"
             @click="handleConfirm('cancel')"
             :type="confirm.cancelColorType"
             size="medium"
             :system-style="$currentStyle"
             :radius="confirm.btnRadius"
-          >{{confirm.cancelText}}
-          </xd-button>
+          >{{confirm.cancelText}}</xd-button>
         </view>
-        <view>
+        <view v-if="confirm.confirm">
           <xd-button
             :font-size="32"
             @click="handleConfirm('confirm')"
-            v-if="confirm.confirm"
             :type="confirm.confirmColorType"
             :system-style="$currentStyle"
             size="medium"
             :radius="confirm.btnRadius"
-          >{{confirm.confirmText}}
-          </xd-button>
+          >{{confirm.confirmText}}</xd-button>
         </view>
       </view>
     </view>

package/src/components/XdSignature/XdSignature.vue

@@ -0,0 +1,475 @@
+<template>
+	<view class="lime-signature" v-if="show" :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" :width="canvasWidth" :height="canvasHeight" @touchstart="touchStart" @touchmove="touchMove"
+			@touchend="touchEnd" @mousedown="touchStart" @mousemove="touchMove" @mouseup="touchEnd"></canvas>
+		<canvas class="offscreen" canvas-id="offscreen" id="offscreen"
+			:style="'width:' + offscreenSize[0] + 'px;height:' + offscreenSize[1] + 'px'" :width="offscreenSize[0]"
+			:height="offscreenSize[1]">
+		</canvas>
+		<view v-if="showMask" class="mask" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd"></view>
+		<!-- #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/hybrid/html/index.html" class="lime-signature__canvas" ref="webview"
+			@pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage"></web-view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifndef APP-NVUE
+	import { canIUseCanvas2d, wrapEvent, requestAnimationFrame, sleep , isPC} from './utils'
+	import {Signature} from './signature'
+	// import {Signature} from '@signature';
+	import { uniContext, createImage, toDataURL } from './context'
+	// #endif
+	import props from './props';
+	import { base64ToPath, getRect } from './utils'
+
+	/**
+	 * LimeSignature 手写板签名
+	 * @description 手写板签名插件：一款能跑在uniapp各端中的签名插件，支持横屏、背景色、笔画颜色、笔画大小等功能,可生成有内容的区域，减小图片尺寸，节省空间。
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4354
+	 * @property {Number} penSize 画笔大小
+	 * @property {Number} minLineWidth 线条最小宽
+	 * @property {Number} maxLineWidth 线条最大宽 
+	 * @property {String} penColor 画笔颜色 
+	 * @property {String} backgroundColor 背景颜色,不填则为透明
+	 * @property {type} 指定 canvas 类型
+	 * @value 2d canvas 2d 
+	 * @value '' 非 canvas 2d 旧接口，微信不再维护
+	 * @property {Boolean} openSmooth 模拟笔锋 
+	 * @property {Number} beforeDelay 延时初始化，在放在弹窗里可以使用 （毫秒）  
+	 * @property {Number} maxHistoryLength 限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能 
+	 * @property {Boolean} landscape 横屏，使用后在最后生成图片时会图片旋转90度
+	 * @property {Boolean} disableScroll 当在写字时，禁止屏幕滚动以及下拉刷新，nvue无效
+	 * @property {Boolean} boundingBox 只生成内容区域，即未画部分不生成，有性能的损耗
+	 */
+	export default {
+		props,
+		data() {
+			return {
+				canvasWidth: null,
+				canvasHeight: null,
+				offscreenWidth: null,
+				offscreenHeight: null,
+				useCanvas2d: true,
+				show: true,
+				offscreenStyles: '',
+				showMask: false,
+				// #ifdef APP-PLUS
+				rclear: 0,
+				rundo: 0,
+				rsave: JSON.stringify({
+					n: 0,
+					fileType: 'png',
+					quality: 1
+				}),
+				rempty: 0,
+				risEmpty: true,
+				toDataURL: null,
+				tempFilePath: [],
+				// #endif
+			}
+		},
+		computed: {
+			canvasId() {
+				// #ifdef VUE2
+				return `lime-signature${this._uid}`
+				// #endif
+				// #ifdef VUE3
+				return `lime-signature${this._.uid}`
+				// #endif
+			},
+			offscreenId() {
+				return this.canvasId + 'offscreen'
+			},
+			offscreenSize() {
+				const {offscreenWidth,offscreenHeight} = this
+				return this.landscape ? [offscreenHeight, offscreenWidth] : [offscreenWidth, offscreenHeight]
+			},
+			canvasStyle() {
+				const { canvasWidth, canvasHeight, backgroundColor } = this
+				return {
+					width: canvasWidth && (canvasWidth + 'px'),
+					height: canvasHeight && (canvasHeight + 'px'),
+					background: backgroundColor
+				}
+			},
+			param() {
+				const {
+					penColor,
+					penSize,
+					backgroundColor,
+					landscape,
+					boundingBox,
+					openSmooth,
+					minLineWidth,
+					maxLineWidth,
+					minSpeed,
+					maxWidthDiffRate,
+					maxHistoryLength,
+					disableScroll
+				} = this
+				return JSON.parse(JSON.stringify({
+					penColor,
+					penSize,
+					backgroundColor,
+					landscape,
+					boundingBox,
+					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' && canIUseCanvas2d() && !isPC
+			this.showMask = isPC
+		},
+		// #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.offscreenWidth = this.canvasWidth = this.signature.canvas.get('width')
+			this.offscreenHeight = 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.stopWatch()
+			this.signature.destroy()
+			this.signature = null
+			this.show = false;
+		},
+		// #endif
+		// #ifdef VUE2
+		beforeDestroy() {
+			this.stopWatch && this.stopWatch()
+			this.signature.destroy()
+			this.show = false;
+			this.signature = null
+		},
+		// #endif
+		// #endif
+		methods: {
+			// #ifdef MP-QQ
+			// toJSON() { return this },
+			// #endif
+			// #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 = []
+					} 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()
+				})
+				const {
+					fileType,
+					quality
+				} = param
+				const rsave = JSON.parse(this.rsave)
+				rsave.n++
+				rsave.fileType = fileType
+				rsave.quality = quality
+				this.rsave = JSON.stringify(rsave)
+				// #endif
+				// #ifndef APP-VUE || APP-NVUE
+				const success = (success) => param.success && param.success(success)
+				const fail = (err) => param.fail && param.fail(err)
+				const { canvas } = this.signature.canvas.get('el')
+				const {
+					backgroundColor,
+					landscape,
+					boundingBox
+				} = this
+				let width = this.signature.canvas.get('width')
+				let height = this.signature.canvas.get('height')
+				let x = 0
+				let y = 0
+
+				const canvasToTempFilePath = (image) => {
+					const context = uni.createCanvasContext('offscreen', this)
+					context.save()
+					context.setTransform(1, 0, 0, 1, 0, 0)
+					if (landscape) {
+						context.translate(0, width)
+						context.rotate(-Math.PI / 2)
+					}
+					if (backgroundColor) {
+						context.fillStyle = backgroundColor
+						context.fillRect(0, 0, width, height)
+					}
+					context.drawImage(image, 0, 0, width, height);
+
+					context.draw(false, () => {
+						toDataURL('offscreen', this, param).then((res) => {
+							const size = Math.max(width, height)
+							context.restore()
+							context.clearRect(0, 0, size, size)
+							success({
+								tempFilePath: res,
+								isEmpty
+							})
+						})
+					})
+				}
+				const next = () => {
+					// #ifndef MP-WEIXIN
+					const param = { x, y, width, height, canvas }
+					// #endif
+					
+					// #ifdef MP-WEIXIN
+					const param = { x, y, width, height, canvas: this.useCanvas2d ? canvas : null}
+					// #endif
+					toDataURL(this.canvasId, this, param).then(canvasToTempFilePath).catch(fail)
+				}
+				// PC端小程序获取不到 ImageData 数据，长度为0
+				if (boundingBox && !isPC) {
+					this.signature.getContentBoundingBox(async res => {
+						this.offscreenWidth = width = res.width
+						this.offscreenHeight = height = res.height
+						
+						x = res.startX
+						y = res.startY
+						await sleep(100)
+						next()
+					})
+				} else {
+					next()
+				}
+				// #endif
+			},
+			// #ifndef APP-PLUS
+			getContext() {
+				return getRect(`#${this.canvasId}`, {
+					context: this,
+					type: this.useCanvas2d ? 'fields' : 'boundingClientRect'
+				}).then(res => {
+					if (res) {
+						let { width, height, node: canvas, left, top, right} = res
+						let {pixelRatio} = uni.getSystemInfoSync()
+						let context;
+						if (canvas) {
+							context = canvas.getContext('2d')
+							canvas.width = width * pixelRatio;
+							canvas.height = height * pixelRatio;
+						} else {
+							pixelRatio = 1
+							context = uniContext(this.canvasId, this)
+							canvas = {
+								createImage,
+								toDataURL: () => toDataURL(this.canvasId, this),
+								requestAnimationFrame
+							}
+						}
+						// 支付宝小程序 使用stroke有个默认背景色
+						context.clearRect(0, 0, width, height)
+						return {
+							left,
+							top,
+							right,
+							width,
+							height,
+							context,
+							canvas,
+							pixelRatio
+						};
+					}
+				})
+			},
+			getTouch(e) {
+				if(isPC && this.canvasRect) {
+					e.touches = e.touches.map(item => {
+						return {
+							...item,
+							x: item.clientX - this.canvasRect.left,
+							y: item.clientY - this.canvasRect.top,
+						}
+					})
+				}
+				return e
+			},
+			touchStart(e) {
+				if (!this.canvasEl) return
+				this.isStart = true
+				// 微信小程序PC端不支持事件，使用这方法模拟一下
+				if(isPC) {
+					getRect(`#${this.canvasId}`, {context: this}).then(res => {
+						this.canvasRect = res
+						this.canvasEl.dispatchEvent('touchstart', wrapEvent(this.getTouch(e)))
+					})
+					return
+				}
+				this.canvasEl.dispatchEvent('touchstart', wrapEvent(e))
+			},
+			touchMove(e) {
+				if (!this.canvasEl || !this.isStart && this.canvasEl) return
+				this.canvasEl.dispatchEvent('touchmove', wrapEvent(this.getTouch(e)))
+			},
+			touchEnd(e) {
+				if (!this.canvasEl) return
+				this.isStart = false
+				this.canvasEl.dispatchEvent('touchend', wrapEvent(e))
+			},
+			// #endif
+		}
+	}
+</script>
+<!-- #ifdef APP-VUE -->
+<script module="sign" lang="renderjs">
+	import sign from './render'
+	export default sign
+</script>
+<!-- #endif -->
+<style lang="scss">
+	.lime-signature,
+	.lime-signature__canvas {
+		/* #ifndef APP-NVUE */
+		position: relative;
+		width: 100%;
+		height: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+	}
+	.mask {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+	}
+	.offscreen {
+		position: fixed;
+		top: 0;
+		left: 9999px;
+	}
+</style>

package/src/components/XdSignature/context.js

@@ -0,0 +1,118 @@
+export const uniContext = (canvasId, context) => {
+	let ctx = uni.createCanvasContext(canvasId, context)
+	if (!ctx.uniDrawImage) {
+		ctx.uniDrawImage = ctx.drawImage
+		ctx.drawImage = (image, ...agrs) => {
+			ctx.uniDrawImage(image.src, ...agrs)
+		}
+	}
+	if (!ctx.getImageData) {
+		ctx.getImageData = (x, y, width, height) => {
+			return new Promise((resolve, reject) => {
+				// #ifdef MP || VUE2
+				if (context.proxy) context = context.proxy
+				// #endif
+				uni.canvasGetImageData({
+					canvasId,
+					x,
+					y,
+					width,
+					height,
+					success(res) {
+						resolve(res)
+					},
+					fail(error) {
+						reject(error)
+					}
+				}, context)
+			})
+		}
+	}
+
+	return ctx
+}
+
+class Image {
+	constructor() {
+		this.currentSrc = null
+		this.naturalHeight = 0
+		this.naturalWidth = 0
+		this.width = 0
+		this.height = 0
+		this.tagName = 'IMG'
+	}
+	set src(src) {
+		this.currentSrc = src
+		uni.getImageInfo({
+			src,
+			success: (res) => {
+				this.naturalWidth = this.width = res.width
+				this.naturalHeight = this.height = res.height
+				this.onload()
+			},
+			fail: () => {
+				this.onerror()
+			}
+		})
+	}
+	get src() {
+		return this.currentSrc
+	}
+}
+
+export const createImage = () => {
+	return new Image()
+}
+export function useCurrentPage() {
+	const pages = getCurrentPages();
+	return pages[pages.length - 1];
+}
+export const toDataURL = (canvasId, context, options = {}) => {
+	// #ifdef MP-QQ
+	// context = context.$scope
+	// #endif
+	// #ifdef MP-ALIPAY
+	context = ''
+	// #endif
+	return new Promise((resolve, reject) => {
+		let {canvas, width, height, destWidth = 0, destHeight = 0, x = 0, y = 0} = options
+		
+		// #ifdef MP-ALIPAY
+		const {pixelRatio} =uni.getSystemInfoSync()
+		if(!destWidth || !destHeight) {
+			destWidth = width * pixelRatio;
+			destHeight = height * pixelRatio;
+			width = destWidth;
+			height = destHeight;
+			x = x * pixelRatio
+			y = y * pixelRatio
+		} 
+		// #endif
+		const params = {
+			...options,
+			canvasId,
+			id: canvasId,
+			// #ifdef MP-ALIPAY
+			x, 
+			y,
+			width,
+			height,
+			destWidth,
+			destHeight,
+			// #endif
+			canvas,
+			success: (res) => {
+				resolve(res.tempFilePath)
+			},
+			fail: (err) => {
+				reject(err)
+			}
+		}
+		if(canvas && canvas.toTempFilePath) {
+			canvas.toTempFilePath(params)
+		} else {
+			uni.canvasToTempFilePath(params, context)
+		}
+	})
+
+}

package/src/components/XdSignature/props.js

@@ -0,0 +1,59 @@
+export default {
+	styles: String,
+	disableScroll: {
+		type: Boolean,
+		default: true
+	},
+	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: 10
+	},
+	landscape: {
+		type: Boolean
+	},
+	boundingBox: {
+		type: Boolean
+	}
+}

package/src/components/XdSignature/render.js

@@ -0,0 +1,140 @@
+// #ifdef APP-VUE 
+// import { Signature } from '@signature'
+import { Signature } from './signature'
+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||this.$ownerInstance.$el;
+			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(param) {
+			let {fileType = 'png', quality = 1, n} = JSON.parse(param)
+			const type = `image/${fileType}`.replace(/jpg/, 'jpeg');
+			if (n !== this.saveCount) {
+				this.saveCount = n;
+				const {backgroundColor, landscape, boundingBox} = this.options
+				const flag =  landscape || backgroundColor || boundingBox
+				console.log('type', type)
+				console.log('flag', flag)
+				const image = this.signature.canvas.get('el').toDataURL(!flag && type, !flag && quality)
+				console.log('image', image.length)
+				if (flag) {
+					const canvas = document.createElement('canvas')
+					const pixelRatio = this.signature.canvas.get('pixelRatio')
+					let width = this.signature.canvas.get('width')
+					let height = this.signature.canvas.get('height')
+					let x = 0
+					let y = 0
+					
+					const next = () => {
+						const size = [width, height]
+						console.log('size width', width)
+						console.log('size height', height)
+						console.log('size pixelRatio', pixelRatio)
+						if(landscape) {size.reverse()}
+						canvas.width = size[0] * pixelRatio
+						canvas.height = size[1] * pixelRatio
+						const param = [x, y, width, height, 0 , 0, width, height].map(item => item * pixelRatio)
+						const context = canvas.getContext('2d')
+						// context.scale(pixelRatio, pixelRatio)
+						if (landscape) {
+							context.translate(0, width * pixelRatio)
+							context.rotate(-Math.PI / 2)
+						}
+						console.log('backgroundColor', backgroundColor)
+						if (backgroundColor) {
+							context.fillStyle = backgroundColor
+							context.fillRect(0, 0, width * pixelRatio, height * pixelRatio)
+						}
+						// param
+						context.drawImage(this.signature.canvas.get('el'), ...param)
+						this.emit({
+							save: canvas.toDataURL(type, quality)
+						})
+						canvas.remove()
+					}
+					if(boundingBox) {
+						const res = this.signature.getContentBoundingBox()
+						width = res.width
+						height = res.height
+						x = res.startX
+						y = res.startY
+						next()
+					} else {
+						next()
+					}
+					
+				} else {
+					this.emit({
+						save: image
+					})
+				}
+			}
+		},
+		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

package/src/components/XdSignature/signature.js

@@ -0,0 +1 @@
+function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function e(e){for(var n=1;arguments.length>n;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?t(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;e.length>n;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function r(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&h(t,e)}function u(t){return u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},u(t)}function h(t,e){return h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},h(t,e)}function c(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function l(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=u(t);if(e){var o=u(this).constructor;n=Reflect.construct(i,arguments,o)}else n=i.apply(this,arguments);return c(this,n)}}var v=function(t){var e=n(t);return null!==t&&"object"===e||"function"===e},f={}.toString,d=function(t,e){return f.call(t)==="[object "+e+"]"},y=function(t){return d(t,"String")},p=function(t){return d(t,"Number")},g=function(t){return d(t,"Function")},m=function(){function t(){i(this,t),this.__events=void 0,this.__events={}}return r(t,[{key:"on",value:function(t,e){if(t&&e){var n=this.__events[t]||[];n.push(e),this.__events[t]=n}}},{key:"emit",value:function(t,e){var n=this;if(v(t)&&(t=(e=t)&&e.type),t){var i=this.__events[t];i&&i.length&&i.forEach((function(t){t.call(n,e)}))}}},{key:"off",value:function(t,e){var n=this.__events,i=n[t];if(i&&i.length)if(e)for(var o=0,r=i.length;r>o;o++)i[o]===e&&(i.splice(o,1),o--);else delete n[t]}},{key:"getEvents",value:function(){return this.__events}}]),t}(),x=function(t){s(n,m);var e=l(n);function n(t,o){var r;return i(this,n),(r=e.call(this)).context=void 0,r.canvas=void 0,r.attrs=void 0,r.isCanvasElement=void 0,r.context=t,r.canvas=o.canvas||t.canvas||{width:o.width||0,height:o.height||0},r.attrs=o||{},r.isCanvasElement=!0,r}return r(n,[{key:"width",get:function(){return this.canvas.width},set:function(t){this.canvas.width=t}},{key:"height",get:function(){return this.canvas.height},set:function(t){this.canvas.height=t}},{key:"getContext",value:function(){return this.context}},{key:"getBoundingClientRect",value:function(){var t=this.attrs||{},e=t.top,n=t.right,i=t.width,o=t.height,r=t.left,a=t.bottom;return{top:void 0===e?0:e,width:void 0===i?0:i,right:void 0===n?0:n,height:void 0===o?0:o,bottom:void 0===a?0:a,left:void 0===r?0:r}}},{key:"setAttribute",value:function(t,e){this.attrs[t]=e}},{key:"addEventListener",value:function(t,e){this.on(t,e)}},{key:"removeEventListener",value:function(t,e){this.off(t,e)}},{key:"dispatchEvent",value:function(t,e){this.emit(t,e)}}]),n}();var w=function(t,e){return t?function(t){if(!t)return!1;if(1!==t.nodeType||!t.nodeName||"canvas"!==t.nodeName.toLowerCase())return!1;var e=!1;try{t.addEventListener("eventTest",(function(){e=!0})),t.dispatchEvent(new Event("eventTest"))}catch(t){e=!1}return e}(t.canvas)?t.canvas:new x(t,e):null};function b(t,e){try{return t.currentStyle?t.currentStyle[e]:document.defaultView&&document.defaultView.getComputedStyle(t,null).getPropertyValue(e)}catch(t){return{width:300,height:150}[e]}}function k(t,e){var n=e.get("el");if(!n)return t;var i=n.getBoundingClientRect(),o=i.top,r=void 0===o?0:o,a=i.left,s=void 0===a?0:a,u=parseFloat(b(n,"padding-left"))||0,h=parseFloat(b(n,"padding-top"))||0;return{x:t.x-s-u,y:t.y-r-h}}function _(t,e){var n=e.get("landscape");if(!n)return t;if(g(n))return n(t,e);var i=e.get("height");return{x:t.y,y:i-t.x}}var E=function(t,e){var n=t.touches;if(!n||!n.length)return[_(k({x:t.clientX,y:t.clientY},e),e)];n.length||(n=t.changedTouches||[]);for(var i=[],o=0,r=n.length;r>o;o++){var a=n[o],s=a.x,u=a.y,h=a.clientX,c=a.clientY,l=void 0;l=p(s)||p(u)?{x:s,y:u}:k({x:h,y:c},e),i.push(_(l,e))}return i},L=function(t,e){var n=e.x-t.x,i=e.y-t.y;return Math.abs(n)>Math.abs(i)?n>0?"right":"left":i>0?"down":"up"},M=function(t,e){var n=Math.abs(e.x-t.x),i=Math.abs(e.y-t.y);return Math.sqrt(n*n+i*i)},P=function(){function t(e){var n=this,o=e.canvas,r=e.el;i(this,t),this.processEvent=void 0,this.canvas=void 0,this.startTime=0,this.endTime=0,this.startPoints=null,this.startDistance=0,this.center=null,this.pressTimeout=void 0,this.eventType=null,this.direction=null,this.lastMoveTime=0,this.prevMovePoints=null,this.prevMoveTime=0,this.lastMovePoints=null,this.pinch=!1,this._click=function(t){var e=E(t,n.canvas);t.points=e,n.emitEvent("click",t)},this._start=function(t){var e,i,o=E(t,n.canvas);o&&(t.points=o,n.emitEvent("touchstart",t),n.reset(),n.startTime=Date.now(),n.startPoints=o,o.length>1?(n.startDistance=M(o[0],o[1]),n.center={x:(e=o[0]).x+((i=o[1]).x-e.x)/2,y:e.y+(i.y-e.y)/2}):n.pressTimeout=setTimeout((function(){var e="press",i="none";t.direction=i,n.emitStart(e,t),n.emitEvent(e,t),n.eventType=e,n.direction=i}),250))},this._move=function(t){var e=E(t,n.canvas);if(e){t.points=e,n.emitEvent("touchmove",t);var i=n.startPoints;if(i)if(e.length>1){var o=n.startDistance,r=M(e[0],e[1]);t.zoom=r/o,t.center=n.center,n.emitStart("pinch",t),n.emitEvent("pinch",t)}else{var a=e[0].x-i[0].x,s=e[0].y-i[0].y,u=n.direction||L(i[0],e[0]);n.direction=u;var h=n.getEventType(e);t.direction=u,t.deltaX=a,t.deltaY=s,n.emitStart(h,t),n.emitEvent(h,t);var c=n.lastMoveTime,l=Date.now();l-c>0&&(n.prevMoveTime=c,n.prevMovePoints=n.lastMovePoints,n.lastMoveTime=l,n.lastMovePoints=e)}}},this._end=function(t){var e=E(t,n.canvas);t.points=e,n.emitEnd(t),n.emitEvent("touchend",t);var i=n.lastMoveTime;if(100>Date.now()-i){var o=i-(n.prevMoveTime||n.startTime);if(o>0){var r=n.prevMovePoints||n.startPoints,a=n.lastMovePoints;if(!r||!a)return;var s=M(r[0],a[0])/o;s>.3&&(t.velocity=s,t.direction=L(r[0],a[0]),n.emitEvent("swipe",t))}}n.reset();var u=t.touches;u&&u.length>0&&n._start(t)},this._cancel=function(t){n.emitEvent("touchcancel",t),n.reset()},this.canvas=o,this.delegateEvent(r),this.processEvent={}}return r(t,[{key:"delegateEvent",value:function(t){t.addEventListener("click",this._click),t.addEventListener("touchstart",this._start),t.addEventListener("touchmove",this._move),t.addEventListener("touchend",this._end),t.addEventListener("touchcancel",this._cancel)}},{key:"emitEvent",value:function(t,e){this.canvas.emit(t,e)}},{key:"getEventType",value:function(t){var e,n=this.eventType,i=this.startTime,o=this.startPoints;if(n)return n;var r=this.canvas.__events.pan;if(r&&r.length){var a=Date.now();if(!o)return;e=a-i>250&&10>M(o[0],t[0])?"press":"pan"}else e="press";return this.eventType=e,e}},{key:"enable",value:function(t){this.processEvent[t]=!0}},{key:"isProcess",value:function(t){return this.processEvent[t]}},{key:"emitStart",value:function(t,e){this.isProcess(t)||(this.enable(t),this.emitEvent("".concat(t,"start"),e))}},{key:"emitEnd",value:function(t){}},{key:"clearPressTimeout",value:function(){this.pressTimeout&&(clearTimeout(this.pressTimeout),this.pressTimeout=null)}},{key:"reset",value:function(){this.clearPressTimeout(),this.startTime=0,this.startPoints=null,this.startDistance=0,this.direction=null,this.eventType=null,this.pinch=!1,this.prevMoveTime=0,this.prevMovePoints=null,this.lastMoveTime=0,this.lastMovePoints=null}}]),t}(),T=function(t){s(o,m);var e=l(o);function o(t){var n;i(this,o),(n=e.call(this))._attrs={},n._isWindow=void 0,n._attrs=Object.assign({},t),n._isWindow="undefined"!=typeof window,n._initPixelRatio(),n._initCanvas();return["createImage","toDataURL","requestAnimationFrame"].forEach((function(e){n._initAttrs(e,t.canvas||n.get("el"))})),n}return r(o,[{key:"get",value:function(t){return this._attrs[t]}},{key:"set",value:function(t,e){this._attrs[t]=e}},{key:"_initAttrs",value:function(t,e){var n=this;if(!this.get(t)){this.set(t,(function(){return e[t]?e[t].apply(e,arguments):n._isWindow?window[t]?(i=window)[t].apply(i,arguments):"createImage"==t?new Image:null:void 0;var i}))}}},{key:"_initCanvas",value:function(){var t,e,n=this.get("el"),i=this.get("context");if(!n&&!i)throw Error("请指定 id、el 或 context!");t=n?y(n)?(e=n)?document.getElementById(e):null:n:w(i,this._attrs),i&&t&&!t.getContext&&(t.getContext=function(){return i});var o=this.get("width")||function(t){var e=b(t,"width");return"auto"===e&&(e=t.offsetWidth),parseFloat(e)}(t)||t.width,r=this.get("height")||function(t){var e=b(t,"height");return"auto"===e&&(e=t.offsetHeight),parseFloat(e)}(t)||t.height;this.set("canvas",this),this.set("el",t),this.set("context",i||t.getContext("2d")),this.changeSize(o,r);var a=new P({canvas:this,el:t,parent:this.get("parent")});this.set("eventController",a)}},{key:"_initPixelRatio",value:function(){this.get("pixelRatio")||this.set("pixelRatio",window&&window.devicePixelRatio||1)}},{key:"changeSize",value:function(t,e){var i,o=this.get("pixelRatio"),r=this.get("el");(r.style&&(r.style.width=t+"px",r.style.height=e+"px"),(i=r)&&"object"===n(i)&&(1===i.nodeType&&i.nodeName||i.isCanvasElement))&&(r.width=t*o,r.height=e*o,1!==o&&this.get("context").scale(o,o));this.set("width",t),this.set("height",e)}},{key:"destroy",value:function(){if(!this.get("destroyed")){var t=this.get("el");t.width=0,t.height=0,this.clear(),this._attrs={},this.set("destroyed",!0)}}},{key:"clear",value:function(){}},{key:"isDestroyed",value:function(){return this.get("destroyed")}}]),o}();var S={penColor:"black",backgroundColor:"",openSmooth:!0,penSize:2,minLineWidth:2,maxLineWidth:6,minSpeed:1.5,maxWidthDiffRate:20,maxHistoryLength:20},D=null,O=function(){function t(e){var n=this;i(this,t),this.canAddHistory=!0,this.points=[],this.historyList=[],this.canvas=void 0,this._isEmpty=!0,this.active=!1,this.getLineWidth=function(t){var e=n.get("options"),i=e.minSpeed,o=e.minLineWidth,r=n.getMaxLineWidth();return Math.min(Math.max(r-(r-o)*t/Math.max(Math.min(i,10),1),o),r)},this.drawTrapezoid=function(t,e,i,o){var r=n.get("context");r.beginPath(),r.moveTo(Number(t.x.toFixed(1)),Number(t.y.toFixed(1))),r.lineTo(Number(e.x.toFixed(1)),Number(e.y.toFixed(1))),r.lineTo(Number(i.x.toFixed(1)),Number(i.y.toFixed(1))),r.lineTo(Number(o.x.toFixed(1)),Number(o.y.toFixed(1))),r.fillStyle=n.get("options").penColor,r.fill(),r.draw&&r.draw(!0)},this.drawNoSmoothLine=function(t,e){e.lastX=t.x+.5*(e.x-t.x),e.lastY=t.y+.5*(e.y-t.y),"number"==typeof t.lastX&&n.drawCurveLine(t.lastX,t.lastY,t.x,t.y,e.lastX,e.lastY,n.getMaxLineWidth())},this.drawCurveLine=function(t,e,i,o,r,a,s){s=Number(s.toFixed(1));var u=n.get("context");u.lineWidth=s,u.beginPath(),u.moveTo(Number(t.toFixed(1)),Number(e.toFixed(1))),u.quadraticCurveTo(Number(i.toFixed(1)),Number(o.toFixed(1)),Number(r.toFixed(1)),Number(a.toFixed(1))),u.stroke(),u.draw&&u.draw(!0)},this.getRadianData=function(t,e,n,i){var o=n-t,r=i-e;if(0===o)return{val:0,pos:-1};if(0===r)return{val:0,pos:1};var a=Math.abs(Math.atan(r/o));return n>t&&e>i||t>n&&i>e?{val:a,pos:1}:{val:a,pos:-1}},this.getRadianPoints=function(t,e,n,i){if(0===t.val)return 1===t.pos?[{x:e,y:n+i},{x:e,y:n-i}]:[{y:n,x:e+i},{y:n,x:e-i}];var o=Math.sin(t.val)*i,r=Math.cos(t.val)*i;return 1===t.pos?[{x:e+o,y:n+r},{x:e-o,y:n-r}]:[{x:e+o,y:n-r},{x:e-o,y:n+r}]},this.drawSmoothLine=function(t,e){var i=e.x-t.x,o=e.y-t.y;if(Math.abs(i)+Math.abs(o)>2?(e.lastX1=t.x+.3*i,e.lastY1=t.y+.3*o,e.lastX2=t.x+.7*i,e.lastY2=t.y+.7*o):(e.lastX1=e.lastX2=t.x+.5*i,e.lastY1=e.lastY2=t.y+.5*o),e.perLineWidth=(t.lineWidth+e.lineWidth)/2,"number"==typeof t.lastX1){if(n.drawCurveLine(t.lastX2,t.lastY2,t.x,t.y,e.lastX1,e.lastY1,e.perLineWidth),t.isFirstPoint)return;if(t.lastX1===t.lastX2&&t.lastY1===t.lastY2)return;var r=n.getRadianData(t.lastX1,t.lastY1,t.lastX2,t.lastY2),a=n.getRadianPoints(r,t.lastX1,t.lastY1,t.perLineWidth/2),s=n.getRadianPoints(r,t.lastX2,t.lastY2,e.perLineWidth/2);n.drawTrapezoid(a[0],s[0],s[1],a[1])}else e.isFirstPoint=!0},this.addHistory=function(){var t=n.get("options").maxHistoryLength;if(t&&n.canAddHistory)if(n.canAddHistory=!1,n.get("createImage")){var e=null;e=n.get("createImage")();var i=n.get("toDataURL")&&n.get("toDataURL")();y(i)?e.src=i:i.then((function(t){e.src=t})),e.onload=function(){var i=D;D=e,n.historyList.push(i),n.historyList=n.historyList.slice(-t)}}else n.historyList.length++},this.drawByImage=function(t){var e=n.get("context"),i=n.get("width"),o=n.get("height");e.clearRect(0,0,i,o);try{t&&e.drawImage(t,0,0,i,o),e.draw&&e.draw(!0)}catch(t){n.historyList.length=0}},this.isEmpty=function(){return n.get("options").maxHistoryLength>0?0===n.historyList.length:n._isEmpty},this.clear=function(){var t=n.get("context");t.clearRect(0,0,n.get("width"),n.get("height")),t.draw&&t.draw(),n._isEmpty=!0,D=null,n.historyList.length=0},this.undo=function(){if(0===n.get("options").maxHistoryLength&&n.clear(),n.get("createImage")&&n.historyList.length){var t=n.historyList.splice(-1)[0];n.drawByImage(t),0===n.historyList.length&&n.clear()}},this.canvas=e,this.canvas.set("pen",S),this.init()}return r(t,[{key:"getOption",value:function(){}},{key:"setOption",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e({},t),i=n.maxLineWidth;if(i&&t.penSize&&i==S.maxLineWidth){var o=Math.max(i,t.penSize);n.maxLineWidth=o}this.canvas.set("pen",Object.assign({},S,n))}},{key:"get",value:function(t){return this.canvas.get("options"==t?"pen":t)}},{key:"init",value:function(){var t=this;this.get("context").lineCap="round",this.canvas.on("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.on("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.on("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"drawBackground",value:function(){var t=this.get("context"),e=this.get("width"),n=this.get("height"),i=this.get("options"),o=i.backgroundColor,r=i.backgroundImage;o&&(t.fillStyle=o,t.fillRect(0,0,e,n),t.draw&&t.draw(!0)),r&&this.drawByImage(r)}},{key:"getContentBoundingBox",value:function(t){var e=this.get("pixelRatio"),n=this.get("width"),i=this.get("height"),o=this.get("el"),r="CANVAS"===o.nodeName,a=r?n:o.width,s=r?i:o.height;e=r?1:e;var u=function(n){for(var i=a,o=s,r=0,u=0,h=0;n.length>h;h+=4){if(n[h+3]>0){var c=h/4%a,l=Math.floor(h/4/a);i=Math.min(i,c),o=Math.min(o,l),r=Math.max(r,c),u=Math.max(u,l)}}var v={width:(r-i+1)/e,height:(u-o+1)/e,startX:i/e,startY:o/e};return t&&t(v),v};if("CANVAS"===o.nodeName){var h=document.createElement("canvas");h.width=n,h.height=i;var c=h.getContext("2d");c.drawImage(o,0,0,n,i);var l=c.getImageData(0,0,n,i).data;return u(l)}var f,d=this.get("context").getImageData(0,0,a,s);return v(f=d)&&g(f.then)&&g(f.catch)?(d.then((function(t){return u(t.data)})),null):u(d.data)}},{key:"remove",value:function(){var t=this;this.canvas.off("touchstart",(function(e){return t.onDrawStart(e)})),this.canvas.off("touchmove",(function(e){return t.onDrawMove(e)})),this.canvas.off("touchend",(function(e){return t.onDrawEnd(e)}))}},{key:"disableScroll",value:function(t){t.preventDefault&&this.get("options").disableScroll&&t.preventDefault()}},{key:"onDrawStart",value:function(t){this.disableScroll(t);var e=t.points;if(this.active){this.canAddHistory=!0,this.get("context").strokeStyle=this.get("options").penColor;var n=e[0];this.initPoint(n.x,n.y)}}},{key:"onDrawMove",value:function(t){if(this.disableScroll(t),this.active){var e=t.points[0];this.initPoint(e.x,e.y),this.onDraw()}}},{key:"onDrawEnd",value:function(t){this.active&&(this.addHistory(),this.canAddHistory=!0,this.points=[])}},{key:"onDraw",value:function(){var t=this,e=this.get("context");if(this.points.length>=2){e.lineWidth=this.get("options").penSize||2;var n=this.points.slice(-1)[0],i=this.points.slice(-2,-1)[0],o=function(){t._isEmpty=!1,t.get("options").openSmooth?t.drawSmoothLine(i,n):t.drawNoSmoothLine(i,n)},r=this.get("el").canvas;r&&r.requestAnimationFrame?r.requestAnimationFrame((function(){return o()})):"function"==typeof requestAnimationFrame?requestAnimationFrame((function(){return o()})):o()}}},{key:"getMaxLineWidth",value:function(){var t=this.get("options");return Math.min(t.penSize,t.maxLineWidth)}},{key:"initPoint",value:function(t,e){var n={x:t,y:e,t:Date.now()},i=this.points.slice(-1)[0];if(!i||i.t!==n.t&&(i.x!==t||i.y!==e)){if(this.get("options").openSmooth&&i){var o=this.points.slice(-2,-1)[0];if(n.distance=Math.sqrt(Math.pow(n.x-i.x,2)+Math.pow(n.y-i.y,2)),n.speed=n.distance/(n.t-i.t||.1),n.lineWidth=this.getLineWidth(n.speed),o&&o.lineWidth&&i.lineWidth){var r=(n.lineWidth-i.lineWidth)/i.lineWidth,a=this.get("options").maxWidthDiffRate/100;if(a=a>1?1:.01>a?.01:a,Math.abs(r)>a)n.lineWidth=i.lineWidth*(1+(r>0?a:-a))}}this.points.push(n),this.points=this.points.slice(-3)}}}]),t}(),W=function(){function t(e){i(this,t),this.canvas=void 0,this._ee=void 0,this.pen=void 0;var n=new T(e);n.set("parent",this),this.canvas=n,this._ee=new m,this.pen=new O(n),this.init()}return r(t,[{key:"init",value:function(){this.pen.active=!0}},{key:"destroy",value:function(){this.canvas.destroy()}},{key:"clear",value:function(){this.pen.clear()}},{key:"undo",value:function(){this.pen.undo()}},{key:"save",value:function(){}},{key:"getContentBoundingBox",value:function(t){return this.pen.getContentBoundingBox(t)}},{key:"isEmpty",value:function(){return this.pen.isEmpty()}},{key:"on",value:function(t,e){this._ee.on(t,e)}},{key:"emit",value:function(t,e){this._ee.emit(t,e)}},{key:"off",value:function(t,e){this._ee.off(t,e)}}]),t}();export default W;export{W as Signature};

package/src/components/XdSignature/utils.js

@@ -0,0 +1,161 @@
+export function compareVersion(v1, v2) {
+	v1 = v1.split('.')
+	v2 = v2.split('.')
+	const len = Math.max(v1.length, v2.length)
+	while (v1.length < len) {
+		v1.push('0')
+	}
+	while (v2.length < len) {
+		v2.push('0')
+	}
+	for (let i = 0; i < len; i++) {
+		const num1 = parseInt(v1[i], 10)
+		const num2 = parseInt(v2[i], 10)
+
+		if (num1 > num2) {
+			return 1
+		} else if (num1 < num2) {
+			return -1
+		}
+	}
+	return 0
+}
+let {platform, SDKVersion} = uni.getSystemInfoSync() 
+function gte(version) {
+  // #ifdef MP-ALIPAY
+  SDKVersion = my.SDKVersion
+  // #endif
+  return compareVersion(SDKVersion, version) >= 0;
+}
+
+export const isPC = /windows|mac/.test(platform)
+export function canIUseCanvas2d() {
+	// #ifdef MP-WEIXIN
+	return gte('2.9.0');
+	// #endif
+	// #ifdef MP-ALIPAY
+	return gte('2.7.0');
+	// #endif
+	// #ifdef MP-TOUTIAO
+	return gte('1.78.0');
+	// #endif
+	return false
+}
+
+
+export const wrapEvent = (e) => {
+  if (!e) return;
+  if (!e.preventDefault) {
+    e.preventDefault = function() {};
+  }
+  return e;
+}
+
+export const requestAnimationFrame = (cb) => {
+	setTimeout(cb, 30)
+}
+
+// #ifdef MP
+export const prefix = () => {
+	// #ifdef MP-TOUTIAO
+	return tt
+	// #endif
+	// #ifdef MP-WEIXIN
+	return wx
+	// #endif
+	// #ifdef MP-BAIDU
+	return swan
+	// #endif
+	// #ifdef MP-ALIPAY
+	return my
+	// #endif
+	// #ifdef MP-QQ
+	return qq
+	// #endif
+	// #ifdef MP-360
+	return qh
+	// #endif
+}
+// #endif
+
+/**
+ * base64转路径
+ * @param {Object} base64
+ */
+export function base64ToPath(base64) {
+	const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
+	return new Promise((resolve, reject) => {
+		// #ifdef MP
+		const p = prefix()
+		const fs = p.getFileSystemManager()
+		//自定义文件名
+		if (!format) {
+			reject(new Error('ERROR_BASE64SRC_PARSE'))
+		}
+		const time = new Date().getTime();
+		const filePath = `${p.env.USER_DATA_PATH}/${time}.${format}`;
+		fs.writeFile({
+			filePath,
+			data: base64.split(',')[1],
+			encoding: 'base64',
+			success() {
+				resolve(filePath)
+			},
+			fail(err) {
+				reject(err)
+			}
+		})
+		// #endif
+		// #ifdef APP-PLUS
+		const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
+		bitmap.loadBase64Data(base64, () => {
+			if (!format) {
+				reject(new Error('ERROR_BASE64SRC_PARSE'))
+			}
+			const time = new Date().getTime();
+			const filePath = `_doc/uniapp_temp/${time}.${format}`
+			bitmap.save(filePath, {},
+				() => {
+					bitmap.clear()
+					resolve(filePath)
+				},
+				(error) => {
+					bitmap.clear()
+					reject(error)
+				})
+		}, (error) => {
+			bitmap.clear()
+			reject(error)
+		})
+		// #endif
+	})
+}
+
+
+export function sleep(delay) {
+	return new Promise(resolve => setTimeout(resolve, delay))
+}
+
+export function getRect(selector, options = {}) {
+	const typeDefault = 'boundingClientRect'
+	const { context, type = typeDefault} = options
+	return new Promise((resolve, reject) => {
+		const dom = uni.createSelectorQuery().in(context).select(selector);
+		const result = (rect) => {
+			if(rect) {
+				 resolve(rect)
+			} else {
+				reject()
+			}
+		}
+		if(type == typeDefault) {
+			dom[type](result).exec()
+		} else {
+			dom[type]({
+				node: true,
+				size: true,
+				rect: true
+			}, result).exec()
+		}
+	});
+};