xinelu-applet-ui/components/v-sign/v-sign.vue

<template>
	<view class="signature-wrap">
		<canvas
			:canvas-id="cid"
			:id="cid"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
			@touchend="onTouchEnd"
			style="height:600rpx"
			:style="[{ width: formatSize(width)}, customStyle]"
		></canvas>
		<slot />
	</view>
</template>

<script>
/**
 * sign canvas 手写签名
 * @description 设置线条宽度、颜色，撤回，清空
 * @tutorial
 * @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
 * @property {String, Number} width canvas 宽度
 * @property {String, Number} height canvas 高度
 * @property {Object} customStyle 自定义样式
 * @property {String} lineColor 画笔颜色
 * @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
 * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
 * @example <v-sign @init="signInit"></v-sign>
 */
import { formatSize } from './utils'
// convas 实例
let canvasCtx

export default {
	name: 'v-sign',
	props: {
		// canvas id
		cid: {
			type: String,
			default: `v-sign-${Date.now()}`
			// required: true
		},
		// canvas 宽度
		width: {
			type: [String, Number],
			default: '100%'
		},
		// canvas 高度
		height: {
			type: [String, Number],
			default: 300
		},
		// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
		lineWidth: {
			type: Number
		},
		// 线颜色
		lineColor: {
			type: String,
			default: '#000'
		},
		// canvas自定义样式
		customStyle: {
			type: Object,
			default: () => ({})
		}
	},
	provide() {
		return {
			getInterface: this.provideInterface
		}
	},
	data() {
		return {
			formatSize,
			lineData: [],
			winWidth: 0,
			winHeight: 0,
			penLineWidth: null, // v-sign-pen 组件设置的画笔大小
		}
	},
	mounted() {
		canvasCtx = uni.createCanvasContext(this.cid, this)
		// 初始化完成，向外暴露接口
		this.$emit('init', this.provideInterface())
		// 获取窗口宽高
		uni.getSystemInfo({
			success: res => {
				this.winWidth = res.windowWidth
				this.winHeight = res.windowHeight
			}
		})
	},
	methods: {
		onTouchStart(e) {
			const pos = e.touches[0]
			this.lineData.push({
				style: {
					color: this.lineColor,
					width: this.lineWidth || this.penLineWidth || 4
				},
				// 屏幕坐标
				coordinates: [
					{
						type: e.type,
						x: pos.x,
						y: pos.y
					}
				]
			})
			this.drawLine()
		},
		onTouchMove(e) {
			const pos = e.touches[0]
			this.lineData[this.lineData.length - 1].coordinates.push({
				type: e.type,
				x: pos.x,
				y: pos.y
			})
			this.drawLine()
		},
		onTouchEnd(e) {
			// console.log(e.type, e)
		},
		// 清空画布
		clear() {
			this.lineData = []
			canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
			canvasCtx.draw()
		},
		// 撤销
		revoke() {
			this.lineData.pop()
			this.lineData.forEach((item, index) => {
				canvasCtx.beginPath()
				canvasCtx.setLineCap('round')
				canvasCtx.setStrokeStyle(item.style.color)
				canvasCtx.setLineWidth(item.style.width)
				item.coordinates.forEach(pos => {
					if (pos.type == 'touchstart') {
						canvasCtx.moveTo(pos.x, pos.y)
					} else {
						canvasCtx.lineTo(pos.x, pos.y)
					}
				})
				canvasCtx.stroke()
			})
			canvasCtx.draw()
		},
		// 绘制线条
		drawLine() {
			const lineDataLen = this.lineData.length
			if (!lineDataLen) return
			const currentLineData = this.lineData[lineDataLen - 1]
			const coordinates = currentLineData.coordinates
			const coordinatesLen = coordinates.length
			if (!coordinatesLen) return
			let startPos
			let endPos
			if (coordinatesLen < 2) {
				// only start, no move event
				startPos = coordinates[coordinatesLen - 1]
				endPos = { x: startPos.x + 1, y: startPos.y }
			} else {
				startPos = coordinates[coordinatesLen - 2]
				endPos = coordinates[coordinatesLen - 1]
			}
			
			const style = currentLineData.style
			canvasCtx.beginPath()
			canvasCtx.setLineCap('round')
			canvasCtx.setStrokeStyle(style.color)
			canvasCtx.setLineWidth(style.width)
			canvasCtx.moveTo(startPos.x, startPos.y)
			canvasCtx.lineTo(endPos.x, endPos.y)
			// const P1 = this.caculateBezier(startPos, endPos, centerPos)
			// console.log(P1.x, P1.y)
			// canvasCtx.moveTo(startPos.x, startPos.y)
			// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
			canvasCtx.stroke()
			canvasCtx.draw(true)
		},
		canvasToTempFilePath(conf = {}) {
			return new Promise((resolve, reject) => {
				uni.canvasToTempFilePath(
					{
						canvasId: this.cid,
						...conf,
						success: res => {
							resolve(res.tempFilePath)
						},
						fail: err => {
							console.log('fail', err)
							reject(err)
						}
					},
					this
				)
			})
		},
		setLineWidth(numberVal) {
			this.penLineWidth = numberVal
		},
		provideInterface() {
			return {
				cid: this.cid,
				ctx: canvasCtx,
				clear: this.clear,
				revoke: this.revoke,
				canvasToTempFilePath: this.canvasToTempFilePath,
				setLineWidth: this.setLineWidth
			}
		},
		/**
		 * 计算二次贝塞尔曲线 控制点 P1
		 * 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
		 * 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
		 * 代入坐标得：
		 * x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
		 * y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
		 */
		caculateBezier(P0, P2, B, t = 0.5) {
			const { x: x0, y: y0 } = P0
			const { x: x2, y: y2 } = P2
			const { x, y } = B
			let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
			let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
			return { x: x1, y: y1 }
		}
	}
}
</script>

<style lang="scss" scoped>
.signature-wrap {
	position: relative;
}
</style>