v1.0.0-beta 源码正式开源

2026-06-12 21:29:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,191 @@
+<template>
+	<view class="tm-signBoard" >
+		<!-- @touchmove.stop.prevent="stopEvent" -->
+		<!-- #ifdef H5 || APP-VUE || APP-PLUS -->
+		
+		<canvas
+			:style="{
+				width: ctx_w + 'px',
+				height: ctx_h + 'px'
+			}"
+			:disable-scroll="true"
+			@touchstart="touchstart"
+			@touchmove.stop.prevent="touchsmove"
+			@touchend="touchsend"
+			
+			@mousedown="touchstart"
+			@mousemove.stop.prevent="touchsmove"
+			@mouseup="touchsend"
+			
+			:canvas-id="uid"
+			:id="uid"
+		></canvas>
+		<!-- #endif -->
+		<!-- #ifdef MP -->
+		<canvas
+			:style="{
+				width: ctx_w + 'px',
+				height: ctx_h + 'px'
+			}"
+			:disable-scroll="true"
+			@touchstart="touchstart"
+			@touchmove="touchsmove"
+			@touchend="touchsend"
+			@mousedown="touchstart"
+			@mousemove.stop.prevent="touchsmove"
+			@mouseup="touchsend"
+			canvas-id="tm-signBoard-id"
+			id="tm-signBoard-id"
+		></canvas>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+/**
+ * 手写签名板
+ * @description 手写签名板,笔峰效果,通过ref执行clear和save功能。
+ * @property {Number} line-width = [] 默认：6，线宽度。
+ * @property {String} line-color = [] 默认：'#000000'，线颜色
+ * @property {Number} width = [] 默认：0， 画布宽，默认使用父组件的宽高。单位upx
+ * @property {Number} height = [] 默认：400， 画布高，单位upx
+ * @example <tm-signBoard></tm-signBoard>
+ */
+export default {
+	name: 'tm-signBoard',
+	props: {
+		lineWidth: {
+			type: Number,
+			default: 6
+		},
+		lineColor: {
+			type: String,
+			default: '#000000'
+		},
+		// 默认使用父组件的宽高。单位upx
+		width: {
+			type: Number,
+			default: 0
+		},
+		// 单位upx
+		height: {
+			type: Number,
+			default: 400
+		}
+	},
+	data() {
+		return {
+			ctx: null,
+			uid:"f",
+			ctx_w: 0,
+			ctx_h: 0
+		};
+	},
+	created() {
+		// #ifdef H5 || APP-VUE || APP-PLUS
+		this.uid = this.$tm.guid();
+		// #endif
+	},
+	async mounted() {
+		let qins = await this.$Querey('.tm-signBoard',this,50).catch(e => {});
+		
+		this.ctx_w = uni.upx2px(this.width) || qins[0].width;
+		this.ctx_h = uni.upx2px(this.height) || qins[0].height;
+		this.$nextTick(function() {
+			// #ifdef H5 || APP-VUE || APP-PLUS
+			this.ctx = uni.createCanvasContext(this.uid, this);
+			// #endif
+			// #ifdef MP
+			this.ctx = uni.createCanvasContext('tm-signBoard-id', this);
+			// #endif
+			this.handwriting = new uni.$tm.HandwritingSelf(this.ctx,this.ctx_w,this.ctx_h,this.lineWidth,this.lineColor)
+		});
+	},
+	methods: {
+		touchstart(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			
+			if (event.type.indexOf('mouse')==-1&&event.changedTouches.length==1) {
+				var touch = event.changedTouches[0];
+				this.handwriting.down(touch.x,touch.y);
+				
+			}else{
+				this.handwriting.down(event.pageX-event.currentTarget.offsetLeft,event.pageY-event.currentTarget.offsetTop);
+			}
+		},
+		touchsmove(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			if (event.type.indexOf('mouse')==-1&&event.changedTouches.length == 1) {
+				var touch = event.changedTouches[0];
+				this.handwriting.move(touch.x,touch.y);
+				
+			}else{
+				this.handwriting.move(event.pageX-event.currentTarget.offsetLeft,event.pageY-event.currentTarget.offsetTop);
+			}
+		},
+		touchsend(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			if (event.type.indexOf('mouse')==-1&&event.changedTouches.length == 1) {
+				var touch = event.changedTouches[0];
+				this.handwriting.up(touch.x,touch.y);
+			}else{
+				this.handwriting.up(event.pageX-event.currentTarget.offsetLeft,event.pageY-event.currentTarget.offsetTop);
+			}
+		},
+		clear() {
+			if (!this.ctx) return;
+			this.ctx.clearRect(0, 0, this.ctx_w, this.ctx_h);
+			this.ctx.draw(false);
+			this.$nextTick(function() {
+				// #ifdef H5
+				this.ctx = uni.createCanvasContext(this.uid, this);
+				// #endif
+				// #ifndef H5
+				this.ctx = uni.createCanvasContext('tm-signBoard-id', this);
+				// #endif
+				this.handwriting = new uni.$tm.HandwritingSelf(this.ctx,this.ctx_w,this.ctx_h,this.lineWidth,this.lineColor)
+			});
+		},
+		save() {
+			let t = this;
+			
+			return new Promise((su, fa) => {
+				if (!this.ctx) {
+					fa('ctx未初始化');
+					return;
+				}
+				let uid =this.uid;
+				// #ifndef H5
+				uid='tm-signBoard-id'
+				// #endif
+				uni.canvasToTempFilePath(
+					{
+						x: 0,
+						y: 0,
+						width: t.ctx_w,
+						height: t.ctx_h,
+						canvasId: uid,
+						success: function(res) {
+							// 在H5平台下，tempFilePath 为 base64
+							su(res.tempFilePath);
+						},
+						fail: res => {
+							fa(res);
+						}
+					},
+					
+				);
+			});
+		},
+		stopEvent(event) {
+			event.preventDefault()
+			event.stopPropagation()
+		}
+	}
+};
+</script>
+
+<style lang="scss"></style>