uni-app通过canvas实现手写签名
分享一个uni-app实现手写签名的方法
具体代码如下:
<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>
赞 (0)