uni-app实现手写签名

亦凉 2023-02-15 12:45 10阅读 0赞

## uni-app 端 ##

参考链接：https://ext.dcloud.net.cn/plugin?id=1806  
我基本是下载的上面链接里面的案例稍作修改，感谢大大

### Template ###

<button @tap="createCanvas">签名</button>
    <view class="signature" v-show="showCanvas">
    	<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 class="close" @click="close">关闭</view>
    	</view>
    </view>

### Script ###

<script>
    	var x = 20;
    	var y =20;
    </script>
    export default { 
    	data() { 
    		return { 
    			showCanvas:false,
    			ctx:'',         //绘图图像
    			points:[],       //路径点集合 
    			signature:''
    		}
    	},
    	methods: { 
    		//关闭并清空画布
    		close:function(){ 
    			this.showCanvas = false;
    			this.clear();
    		},
    		//创建并显示画布
    		createCanvas:function(){ 
    			this.showCanvas = true;
    			
    			this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象
    			
    			//设置画笔样式
    			this.ctx.lineWidth = 4;
    			this.ctx.lineCap = "round"
    			this.ctx.lineJoin = "round"
    		},
    		//触摸开始，获取到起点
    		touchstart:function(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: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(){ 
    			let that = this;
    			uni.canvasToTempFilePath({ 
    			  canvasId: 'mycanvas',
    			  success: function(res) { 
    				  console.log(res)
    					
    				//上传到服务器
    				that.api.uploadFile({ 
    					url: 'user/upload/one',
    					filePath: res.tempFilePath,
    					name: 'file',
    					success: (uploadFileRes) => { 
    						console.log(uploadFileRes)
    						that.signature = uploadFileRes.data.url;
    						that.clear();
    						that.showCanvas = false;
    					}
    				})
    				//保存到本地
    				/* let path = res.tempFilePath; uni.saveImageToPhotosAlbum({ filePath:path, }) */
    			  } 
    			})
    		},
    	}
    }

### CSS ###

.signature { position: fixed;top: 10px;left: 2%;z-index: 999;width:96%;}
    	page{ 
    		background: #fff;
    	}
    	.container { 
    		padding: 20rpx 0 120rpx 0;
    		box-sizing: border-box;
    	}
    	.title{ 
    		height:50upx;
    		line-height: 50upx;
    		font-size: 16px;
    	}
    	.mycanvas{ 
    		width: 100%;
    		height: calc(100vh - 200upx);
    		background-color: #ECECEC;
    	}
    	.footer{ 
    		font-size: 14px;
    		height: 150upx;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    	}
    	.left,.right,.close{ 
    		line-height: 100upx;
    		height: 100upx;
    		width: 220upx;
    		text-align: center;
    		font-weight: bold;
    		color: white;
    		border-radius: 5upx;
    	}
    	.left{ 
    		background: #007AFF;
    	}
    	.right{ 
    		background:orange;
    	}
    	.close { 
    		background:#A3A3A3;
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas实现手写签名

使用canvas实现手写签名，效果如下 ![20200317094026163.gif][] PC端 // 实现canvas签名 var canv

﹏ヽ暗。殇╰゛Y/ 2023年07月15日 13:09/ 0 赞/ 41 阅读

相关 uni-app实现手写签名

uni-app 端参考链接：https://ext.dcloud.net.cn/plugin?id=1806 我基本是下载的上面链接里面的案例稍作修改，感谢大大

亦凉/ 2023年02月15日 12:45/ 0 赞/ 11 阅读

相关制作手写签名

<!DOCTYPE html> <!-- saved from url=(0056)http://hao2013.cn/canvas-special-maste

怼烎@/ 2022年12月10日 15:56/ 0 赞/ 211 阅读

相关 uniapp-手写三级地区选择实现

文章目录 0.演示 1.插件代码 2.使用 3.完整引用 0.演示 ![在这里插入图片描述][2020091

青旅半醒/ 2022年12月07日 15:26/ 0 赞/ 246 阅读

相关 vue 实现手写电子签名-vue-esign

npm install vue-esign --save 1. `在main.js中` 2. `Vue.use(vueEsign)`

我会带着你远行/ 2022年11月27日 07:05/ 0 赞/ 369 阅读

相关 MATLAB 实现电子版的手写签名

Ques:有时候我们需要在电子文档上实现手写的签名，但是又没有相关的文档，我们应该如何解决这个问题呢？先看看实验结果 ![在这里插入图片描述][watermark_

你的名字/ 2022年10月12日 01:13/ 0 赞/ 267 阅读

相关 html 手写签名撤销,[转]H5 canvas手写签名

手写签名 html,body\{ margin: 0; padding: 0; \} .saveimg\{ text-align: center; \} .sa

痛定思痛。/ 2022年10月10日 06:29/ 0 赞/ 251 阅读

相关 vue3手写签名

代码贴到项目即可使用。 <template> <div style="width: 300px;height: 200px;border: 1px so

刺骨的言语ヽ痛彻心扉/ 2022年08月30日 15:50/ 0 赞/ 338 阅读

相关手写签名的实现

使用`UberSignature`实现手写签名功能。 [UberSignature][] 效果图 ![手写签名][70] 代码示例 [demo][] 使用说明

怼烎@/ 2022年05月17日 23:05/ 0 赞/ 314 阅读

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

uni-app通过canvas实现手写签名 <template> <view > <view class="title">请在下面输入签名：

左手的ㄟ右手/ 2021年07月26日 17:51/ 0 赞/ 993 阅读