258资源分享网

对于手写签名组件组件晚上有很多种写法，我选择了一种进行了wepy的框架的改造。如果使用wepy框架做手写签名的话可以直接复制下面的代码。

这里需要提醒的是：安卓手机和苹果手机有适配性的问题，苹果手机在签名的以后手机将无法进行文档的上下左右的滑动，而安卓手机没有影响。解决这个问题的方法是给canvas给disable-scroll属性绑定一个变量 disable-scroll="true" 当进行滑动的时候讲disable-scroll属性设置成true,滑动完成时将属性还原为false.

<template> <view class='content'> <canvas class='firstCanvas' canvas-id="firstCanvas" bindtouchmove='move' bindtouchstart='start' bindtouchend='end' bindtouchcancel='cancel' bindlongtap='tap' disable-scroll='true' binderror='error'> </canvas> <button bindtap='clearClick'>清除</button> <button bindtap='saveClick'>保存图片</button> <image id='signatureImg' src='{{signImage}}'></image> </view> </template> <script> import wepy from 'wepy'; var content = null; var touchs = []; var canvasw = 0; var canvash = 0; export default class Index extends wepy.page { config = {}; components = {}; data = { signImage: '', }; events = {}; methods = { start: function(event) { // console.log("触摸开始" + event.changedTouches[0].x) // console.log("触摸开始" + event.changedTouches[0].y) //获取触摸开始的 x,y let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y } touchs.push(point) }, // 画布的触摸移动手势响应 move: function(e) { let point = { x: e.touches[0].x, y: e.touches[0].y } touchs.push(point) if (touchs.length >= 2) { this.draw(touchs) } }, // 画布的触摸取消响应 cancel: function(e) { console.log("触摸取消" + e) }, // 画布的长按手势响应 tap: function(e) { console.log("长按手势" + e) }, error: function(e) { console.log("画布触摸错误" + e) }, // 画布的触摸移动结束手势响应 end: function(e) { console.log("触摸结束" + e) //清空轨迹数组 for (let i = 0; i < touchs.length; i++) { touchs.pop() } }, }; async onShow() {} async onLoad(options) { //获得Canvas的上下文 content = wx.createCanvasContext('firstCanvas') //设置线的颜色 content.setStrokeStyle("#00ff00") //设置线的宽度 content.setLineWidth(5) //设置线两端端点样式更加圆润 content.setLineCap('round') //设置两条线连接处更加圆润 content.setLineJoin('round') } draw(touchs) { let point1 = touchs[0] let point2 = touchs[1] touchs.shift() content.moveTo(point1.x, point1.y) content.lineTo(point2.x, point2.y) content.stroke() content.draw(true) } clearClick() { //清除画布 content.clearRect(0, 0, canvasw, canvash) content.draw(true) } saveClick() { var that = this wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success: function(res) { //打印图片路径 console.log(res.tempFilePath) //设置保存的图片 that.setData({ signImage: res.tempFilePath }) } }) } } </script> <style> .content { width: 100%; height: 500px; background-color: red; } .firstCanvas { background-color: blue; width: 100%; height: 200px; } image { width: 100%; height: 200px; background-color: orange; } </style>