364 lines
9.0 KiB
Plaintext
364 lines
9.0 KiB
Plaintext
|
<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" :style="landscapeImageStyle" :src="url"></image>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef WEB -->
|
|||
|
|
<!-- #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: false
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
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 landscapeImageStyle = ref<Map<string, string>>(new Map())
|
|||
|
|
|
|||
|
|
let signature : Signature | null = null
|
|||
|
|
let url = ref('')
|
|||
|
|
// #ifdef WEB
|
|||
|
|
let canvas : HTMLCanvasElement | null = null
|
|||
|
|
let touchstart,touchmove,touchend
|
|||
|
|
// #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.value = 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()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
success?.({
|
|||
|
|
tempFilePath: image,
|
|||
|
|
// @ts-ignore
|
|||
|
|
isEmpty: signature?.isEmpty() ?? false
|
|||
|
|
} as LSignatureToFileSuccess)
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
defineExpose({
|
|||
|
|
clear,
|
|||
|
|
redo,
|
|||
|
|
undo,
|
|||
|
|
canvasToTempFilePath,
|
|||
|
|
})
|
|||
|
|
onMounted(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
const width = signatureRef.value?.offsetWidth
|
|||
|
|
const height = signatureRef.value?.offsetHeight
|
|||
|
|
// #ifdef APP
|
|||
|
|
landscapeStyle.value.set('width', `${height}px`)
|
|||
|
|
landscapeStyle.value.set('height', `${width}px`)
|
|||
|
|
landscapeImageStyle.value.set('width', `${width}px`)
|
|||
|
|
landscapeImageStyle.value.set('height', `${height}px`)
|
|||
|
|
landscapeImageStyle.value.set('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 as UniElement)
|
|||
|
|
// @ts-ignore
|
|||
|
|
signature = new Signature({ el: canvas })
|
|||
|
|
let isTouch = false
|
|||
|
|
touchstart = (event: UniMouseEvent) => {
|
|||
|
|
isTouch = true
|
|||
|
|
const rect = canvas?.getBoundingClientRect()
|
|||
|
|
// @ts-ignore
|
|||
|
|
signature!.canvas.emit('touchstart', {
|
|||
|
|
points: [
|
|||
|
|
{
|
|||
|
|
x: event.clientX - rect.left,
|
|||
|
|
y: event.clientY - rect.top
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
touchmove = (event: UniMouseEvent) => {
|
|||
|
|
if(!isTouch) return
|
|||
|
|
const rect = canvas?.getBoundingClientRect()
|
|||
|
|
// @ts-ignore
|
|||
|
|
signature!.canvas.emit('touchmove', {
|
|||
|
|
points: [
|
|||
|
|
{
|
|||
|
|
x: event.clientX - rect.left,
|
|||
|
|
y: event.clientY - rect.top
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
touchend = (event: UniMouseEvent) => {
|
|||
|
|
isTouch = false
|
|||
|
|
const rect = canvas?.getBoundingClientRect();
|
|||
|
|
// @ts-ignore
|
|||
|
|
signature!.canvas.emit('touchend', {
|
|||
|
|
points: [
|
|||
|
|
{
|
|||
|
|
x: event.clientX - rect.left,
|
|||
|
|
y: event.clientY - rect.top
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
canvas?.addEventListener('mousedown', touchstart)
|
|||
|
|
canvas?.addEventListener('mousemove', touchmove)
|
|||
|
|
canvas?.addEventListener('mouseup', touchend)
|
|||
|
|
canvas?.addEventListener('mouseleave', touchend)
|
|||
|
|
|
|||
|
|
|
|||
|
|
// #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
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onUnmounted(()=>{
|
|||
|
|
// #ifdef WEB
|
|||
|
|
canvas?.removeEventListener('mousedown', touchstart)
|
|||
|
|
canvas?.removeEventListener('mousemove', touchmove)
|
|||
|
|
canvas?.removeEventListener('mouseup', touchend)
|
|||
|
|
canvas?.removeEventListener('mouseleave', touchend)
|
|||
|
|
canvas?.remove()
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.l-signature {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
&-landscape {
|
|||
|
|
position: absolute;
|
|||
|
|
pointer-events: none;
|
|||
|
|
left: 1000rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-image {
|
|||
|
|
transform-origin: 0% 0%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|