uni-app通过canvas实现手写签名

左手的ㄟ右手 2021-07-26 17:51 942阅读 0赞

# uni-app通过canvas实现手写签名 #

<template>
    	<view >
    		<view class="title">请在下面输入签名：</view>
    		<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
    		<view class="footer">
    			<view class="left" @click="finish">完成</view>
    			<view class="right" @click="clear">清除</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	var x = 20;
    	var y =20;
    	export default{
    		data(){
    			return {
    				ctx:'',         //绘图图像
    				points:[]       //路径点集合 
    			}
    		},
    		onLoad() {
    			this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象
    			
    			//设置画笔样式
    			this.ctx.lineWidth = 4;
    			this.ctx.lineCap = "round"
    			this.ctx.lineJoin = "round"
    		},
    		methods:{
    			//触摸开始，获取到起点
    			touchstart:function(e){
    				let startX = e.changedTouches[0].x;
    				let startY = e.changedTouches[0].y;
    				let startPoint = {X:startX,Y:startY};
    				
    				/* **************************************************
    					#由于uni对canvas的实现有所不同，这里需要把起点存起来
    				 * **************************************************/
    				this.points.push(startPoint);
    				
    				//每次触摸开始，开启新的路径
    				this.ctx.beginPath();
    			},
    			
    			//触摸移动，获取到路径点
    			touchmove:function(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:function(){                   
    				this.points=[];
    			},
    			
    			/* ***********************************************
    			#   绘制笔迹
    			#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
    			#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
    			#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
    			************************************************ */
    			draw: function() {
    				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:function(){
    				let that = this;
    				uni.getSystemInfo({
    					success: function(res) {
    						let canvasw = res.windowWidth;
    						let canvash = res.windowHeight;
    						that.ctx.clearRect(0, 0, canvasw, canvash);
    						that.ctx.draw(true);
    					},
    				})
    			},
    			
    			//完成绘画并保存到本地
    			finish:function(){
    				uni.canvasToTempFilePath({
    				  canvasId: 'mycanvas',
    				  success: function(res) {
    				    let path = res.tempFilePath;
    					uni.saveImageToPhotosAlbum({
    						filePath:path
    					})
    				  } 
    				})
    			}
    		},
    	}
    </script>
    
    <style>
    	.title{
    		height:50upx;
    		line-height: 50upx;
    		font-size: 16px;
    	}
    	.mycanvas{
    		width: 100%;
    		height: calc(100vh - 200upx);
    		background-color: #ECECEC;
    	}
    	.footer{
    		font-size: 16px;
    		height: 150upx;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    	}
    	.left,.right{
    		line-height: 100upx;
    		height: 100upx;
    		width: 250upx;
    		text-align: center;
    		font-weight: bold;
    		color: white;
    		border-radius: 5upx;
    	}
    	.left{
    		background: #007AFF;
    	}
    	.right{
    		background:orange;
    	}
    </style>