integrated_traffic_uniapp/uni_modules/lime-signature/components/l-signature/l-signature.uvue

<template>
	<view class="l-signature" ref="signatureRef" :style="drawableStyle">
		<!-- #ifdef APP -->
		<view class="l-signature-landscape" ref="signatureLandscapeRef" v-if="landscape && url !=''" :style="landscapeStyle">
			<image class="l-signature-image" ref="signatureImageRef" :src="url" ></image>
		</view>
		<!-- #endif -->
	</view>
</template>
<script lang="uts" setup>
	// @ts-nocheck
	// #ifdef APP
	import { Signature } from './signature.uts'
	// #endif
	// #ifndef APP
	import { Signature } from './signature.js'
	// #endif
	import {nextTick} from 'vue'
	import {LSignatureToTempFilePathOptions, LSignatureToFileSuccess, LSignatureOptions} from '../../index.uts'
	// type SignatureToFileSuccessCallback = (res : UTSJSONObject) => void
	// type SignatureToFileFailCallback = (res : TakeSnapshotFail) => void
	// type SignatureToFileCompleteCallback = (res : any) => void

	/**
	 * LimeSignature 手写板签名
	 * @description 手写板签名插件,uvue专用版。
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4354
	 * @property {Number} penSize 画笔大小
	 * @property {String} penColor 画笔颜色
	 * @property {String} backgroundColor 背景颜色,不填则为透明
	 * @property {Boolean} disableScroll 当在写字时，禁止屏幕滚动以及下拉刷新，nvue无效
	 */

	const props = defineProps({
		styles: {
			type: String,
			default: ''
		},
		penColor: {
			type: String,
			default: 'black'
		},
		penSize: {
			type: Number,
			default: 2
		},
		backgroundColor: {
			type: String,
			default: ''
		},
		openSmooth: {
			type: Boolean,
			default: false
		},
		minLineWidth: {
			type: Number,
			default: 2
		},
		maxLineWidth: {
			type: Number,
			default: 6
		},
		minSpeed: {
			type: Number,
			default: 1.5
		},
		maxWidthDiffRate: {
			type: Number,
			default: 20
		},
		maxHistoryLength: {
			type: Number,
			default: 20
		},
		disableScroll: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		landscape:{
			type: Boolean,
			default: true
		},
	})

	const drawableStyle = computed<string>(():string=>{
		let style : string = ''

		if (props.backgroundColor != '') {
			style += `background-color: ${props.backgroundColor};`
		}
		if (props.styles != '') {
			style += props.styles
		}
		return style
	})
	const signatureRef = ref<UniElement|null>(null)
	let signatureLandscapeRef = ref<UniElement|null>(null)
	let landscapeStyle = ref<Map<string, string>>(new Map())
	let signatureImageRef = ref<UniElement|null>(null)

	let signature:Signature|null = null
	let url = ''
	// #ifdef WEB
	let canvas:HTMLCanvasElement|null = null
	// #endif

	const clear = ()=>{
		signature?.clear()
	}
	const redo = ()=>{
		signature?.redo()
	}
	const undo = ()=>{
		signature?.undo()
	}
	const canvasToTempFilePath = (options : LSignatureToTempFilePathOptions)=>{
		const success = options.success // as SignatureToFileSuccessCallback | null
		const fail = options.fail // as SignatureToFileFailCallback | null
		const complete = options.complete// as SignatureToFileCompleteCallback | null
		const format = options.format ?? 'png'
		// #ifdef APP
		signatureRef.value?.takeSnapshot({
			format,
			success: (res) => {
				if(props.landscape){
					url = res.tempFilePath
					setTimeout(()=>{
						signatureLandscapeRef.value?.takeSnapshot({
							format,
							success: (res2) => {
								success?.({
									tempFilePath: res2.tempFilePath,
									isEmpty: signature?.isEmpty ?? false
								} as LSignatureToFileSuccess)
							}
						})
					},300)

				} else {
					success?.({
						tempFilePath: res.tempFilePath,
						isEmpty: signature?.isEmpty ?? false
					} as LSignatureToFileSuccess)
				}
			},
			fail: (res) => {
				fail?.(res)
			},
			complete: (res) => {
				complete?.(res)
			}
		} as TakeSnapshotOptions)
		// #endif

		// #ifdef WEB
		// @ts-ignore
		const {backgroundColor, backgroundImage, landscape, boundingBox} = props
		const {quality = 1} = options
		const flag =  landscape || backgroundColor || boundingBox
		const type = `image/${format}`.replace(/jpg/, 'jpeg');
		const image = canvas?.toDataURL(!flag && type, !flag && quality)

		if(flag){
			// @ts-ignore
			const canvas = document.createElement('canvas')
			// @ts-ignore
			const pixelRatio = signature?.canvas.get('pixelRatio')
			// @ts-ignore
			let width = signature?.canvas.get('width')
			// @ts-ignore
			let height = signature?.canvas.get('height')
			let x = 0
			let y = 0
			// @ts-ignore
			const next = () => {
				const size = [width, height]
				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')
				if (landscape) {
					context.translate(0, width * pixelRatio)
					context.rotate(-Math.PI / 2)
				}
				if (backgroundColor) {
					context.fillStyle = backgroundColor
					context.fillRect(0, 0, width * pixelRatio, height * pixelRatio)
				}
				const drawImage = () => {
					// @ts-ignore
					context.drawImage(signature?.canvas!.get('el'), ...param)
					success?.({
						tempFilePath: canvas.toDataURL(type, quality),
						// @ts-ignore
						isEmpty: signature?.isEmpty() ?? false
					} as LSignatureToFileSuccess)
					canvas.remove()
				}
				if(backgroundImage) {
					const img = new Image();
					img.onload = () => {
						context.drawImage(img, ...param)
						drawImage()
					}
					img.src = backgroundImage
				}
				if(!backgroundImage) {
					drawImage()
				}
			}
			if(boundingBox) {
				// @ts-ignore
				const res = signature?.getContentBoundingBox()
				width = res.width
				height = res.height
				x = res.startX
				y = res.startY
				next()
			} else {
				next()
			}
		}
		// #endif
	}
	defineExpose({
		clear,
		redo,
		undo,
		canvasToTempFilePath,
	})
	onMounted(()=>{
		nextTick(()=>{
			const width = signatureRef.value?.offsetWidth
			const height = signatureRef.value?.offsetHeight
			// #ifdef APP
			// signatureLandscapeRef.value.style.setProperty('width', `${height}px`)
			// signatureLandscapeRef.value?.style!.setProperty('height', `${width}px`)
			landscapeStyle.value.set('width', `${height}px`)
			landscapeStyle.value.set('height', `${width}px`)
			signatureImageRef.value?.style?.setProperty('width', `${width}px`)
			signatureImageRef.value?.style?.setProperty('height', `${height}px`)
			signatureImageRef.value?.style?.setProperty('transform', `rotate(-90deg) translateY(${width}px)`)

			signature = new Signature(signatureRef.value!)
			// #endif
			// #ifdef WEB
			canvas = document.createElement('canvas')
			canvas.style = 'width: 100%; height: 100%;'
			signatureRef.value?.appendChild(canvas)
			// @ts-ignore
			signature = new Signature({el: canvas})
			// #endif

			watchEffect(()=>{
				const options : LSignatureOptions = {
					penColor: props.penColor,
					openSmooth: props.openSmooth,
					disableScroll: props.disableScroll,
					disabled: props.disabled,
					penSize: props.penSize,
					minLineWidth: props.minLineWidth,
					maxLineWidth: props.maxLineWidth,
					minSpeed: props.minSpeed,
					maxWidthDiffRate: props.maxWidthDiffRate,
					maxHistoryLength: props.maxHistoryLength
				}
				// #ifdef APP
				signature?.setOption(options)
				// #endif
				// #ifdef WEB
				// @ts-ignore
				signature?.pen.setOption(options)
				// #endif
			})
		})
	})
</script>
<style lang="scss">
	.l-signature {
		flex: 1;
		&-landscape{
			position: absolute;
			pointer-events: none;
			left: 1000rpx;
		}
		&-image{
			transform-origin: 0% 0%;
		}
	}
</style>