uni |
您所在的位置：网站首页 › app签名 › uni |
uni
|
代码主要是参考： 实现 uniapp 手写签名功能 - 简书 本示例主要包含三个功能： 1、绘制签名笔迹 2、判断当前是否已经签名 （食之无味，弃之可惜的功能，聊胜于无吧哈哈哈哈） 3、根据实际需求旋转笔迹方向，这个功能其实是通过uni-app提供的压缩图片的接口来实现的。因为当前设置是横屏签名，如果是这样保存的话，签名的方向是横向的，不符合当前的项目需求，所以，需要将生成的签名笔迹图旋转一定角度再保存。具体旋转角度，请根据实际需求进行相应的更改。 同时要注意，保存图片到本地的话，在H5平台下，tempFilePath 为 base64，真机的情况下会默认保存到相册，而压缩图片的接口调用好像要依靠真机，调试使用的时候要注意 这是效果图
这是代码 取消 重写 确认 var x = 20; var y = 20; var tempPoint = []; //用来存放当前画纸上的轨迹点 var id = 0; var type = ''; let that; let canvasw; let canvash; export default { data() { return { ctx: '', //绘图图像 points: [], //路径点集合, width: 0, height: 0 }; }, mounted() {}, onLoad(option) { that = this; console.log(option); id = option.id; type = option.type; this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象 //设置画笔样式 this.ctx.lineWidth = 4; this.ctx.lineCap = 'round'; this.ctx.lineJoin = 'round'; uni.getSystemInfo({ success: function (res) { console.log(res); that.width = res.windowWidth * 0.8; that.height = res.windowHeight * 0.85; } }); }, 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(); //绘制路径 } tempPoint.push(movePoint); }, // 触摸结束，将未绘制的点清空防止对后续路径产生干扰 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); }, handleCancel() { uni.navigateBack({ delta: 1 }); }, //清空画布 handleReset: function () { console.log('handleReset'); that.ctx.clearRect(0, 0, that.width, that.height); that.ctx.draw(true); tempPoint = []; }, //将签名笔迹上传到服务器，并将返回来的地址存到本地 handleConfirm: function () { if (tempPoint.length == 0) { uni.showToast({ title: '请先签名', icon: 'none', duration: 2000 }); return; } uni.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { let tempPath = res.tempFilePath; const ctx = uni.createCanvasContext('camCacnvs', that); ctx.translate(0, that.width); ctx.rotate((-90 * Math.PI) / 180); ctx.drawImage(tempPath, 0, 0, that.width, that.height); ctx.draw(); setTimeout(() => { //保存签名图片到本地 uni.canvasToTempFilePath( { canvasId: 'camCacnvs', success: function (res) { //这是签名图片文件的本地临时地址 let path = res.tempFilePath; }, fail: err => { console.log('fail', err); } }, this ); }, 200); } }); } } }; .container { display: flex; flex-direction: row; } .sign-box { width: 80%; height: 90%; margin: auto; display: flex; flex-direction: column; text-align: center; } .sign-view { height: 100%; } .sigh-btns { height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: space-around; } .btn { margin: auto; padding: 8rpx; transform: rotate(90deg); border: grey 1rpx solid; } .mycanvas { margin: auto 0rpx; background-color: #ececec; } .canvsborder { border: 1rpx solid #333; position: fixed; top: 0; left: 10000rpx; }更新于 2022/08/02 ： 1、修复在iOS上无法使用的问题 |
【本文地址】
今日新闻 |
推荐新闻 |