uniapp 手写签名

html

<template>
	<view class="autograph">
		<!-- 点击触发写字板   @click='createCanvas' -->
		<view class="canvasbox" >
			<canvas 
			class="mycanvas" 
			canvas-id="mycanvas"
			@touchstart="touchstart"
			@touchmove="touchmove" 
			@touchend="touchend"
			></canvas>
		</view>
		<!-- 底部操作按钮 -->
		<view class="footer">
			<button type="primary" plain @click="finish">保存</button>
			<button type="default" plain @click="clear">清除</button>
		</view>
	</view>
</template>
 

js

<script>
	export default {
		data() {
			return {
				//绘图图像
				ctx: '', 
				//路径点集合
				points: [], 
				//签名图片
				SignatureImg: ''
			}
		},
        mounted(){
           this. createCanvas()
        },
		methods: {
			// 初始化绘图--点击触发写字板
		    createCanvas() {
		        //创建绘图对象
		        this.ctx = uni.createCanvasContext('mycanvas', this);
		        //设置画笔样式
		        this.ctx.lineWidth = 4;
		        this.ctx.lineCap = 'round';
		        this.ctx.lineJoin = 'round';
		    },
			// 开始绘图
		    touchstart(e) {
		        let startX = e.changedTouches[0].x;
		        let startY = e.changedTouches[0].y;
		        let startPoint = { X: startX, Y: startY };
		        this.points.push(startPoint);
		        //每次触摸开始，开启新的路径
		        this.ctx.beginPath();
			},
			// 移动 绘制中
		   touchmove(e) {
		        let moveX = e.changedTouches[0].x;
		        let moveY = e.changedTouches[0].y;
		        let movePoint = { X: moveX, Y: moveY };
		        this.points.push(movePoint); //存点
		        let len = this.points.length;
		        if (len >= 2) {
		            this.draw(); //绘制路径
		        }
			},
			// 结束绘图
		   touchend() {
		        this.points = [];
			},
			//绘制路径
		   draw() {
		        let point1 = this.points[0];
		        let point2 = this.points[1];
		        this.points.shift();
		        this.ctx.moveTo(point1.X, point1.Y);
		        this.ctx.lineTo(point2.X, point2.Y);
		        this.ctx.stroke();
		        this.ctx.draw(true);
		    },
			// 清除
		   clear() {
		        uni.getSystemInfo({
					success: (res) => {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						this.ctx.clearRect(0, 0, canvasw, canvash);
						this.ctx.draw(true);
						this.SignatureImg = ''
					}
		        });
		    },
			// 生成签名图片
		   finish() {
		        uni.canvasToTempFilePath({
		            canvasId: 'mycanvas',
		            success: (res) => {
						//这里的res.tempFilePath就是生成的签字图片
						console.log('保存的图片路径',res.tempFilePath);
						this.SignatureImg = res.tempFilePath
		            }
		        });
		   },
		}
	}
</script>

 

css

<style lang="less" scoped>
.autograph{
	padding: 36rpx;
}
.canvasbox{
	width: 100%;
	height: 400rpx;
	background: #F3F4F5;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	.mycanvas{
		width: 100%;
		height: 100%;
	}
}
.footer{
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>