<script> var content = null; var touchs = []; var canvasw = 0; var canvash = 0; //获取系统信息 uni.getSystemInfo({ success: function(res) { canvasw = res.windowWidth; canvash = canvasw * 9 / 16; }, }) export default {
data() { return { signImage: '' } },
methods: {
// 画布的触摸移动开始手势响应 start: function(event) { console.log(event) // console.log("触摸开始" + event.changedTouches[0].x) // console.log("触摸开始" + event.changedTouches[0].y) //获取触摸开始的 x,y let point = { x: event.x, y: event.y } // console.log(touchs) 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) } },
// 画布的触摸移动结束手势响应 end: function(e) { console.log("触摸结束" + e) //清空轨迹数组 for (let i = 0; i < touchs.length; i++) { touchs.pop() }
},
// 画布的触摸取消响应 cancel: function(e) { console.log("触摸取消" + e) },
// 画布的长按手势响应 tap: function(e) { console.log("长按手势" + e) },
error: function(e) { console.log("画布触摸错误" + e) },
//绘制 draw: function(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: function() { //清除画布 content.clearRect(0, 0, canvasw, canvash) content.draw(true) }, //保存图片 saveClick: function() { var that = this uni.canvasToTempFilePath({ canvasId: 'firstCanvas',
success: function(res) { //打印图片路径 console.log(res.tempFilePath) //设置保存的图片 that.signImage= res.tempFilePath } })
}
},
/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { //获得Canvas的上下文 content = wx.createCanvasContext('firstCanvas') //设置线的颜色 content.setStrokeStyle("#000") //设置线的宽度 content.setLineWidth(5) //设置线两端端点样式更加圆润 content.setLineCap('round') //设置两条线连接处更加圆润 content.setLineJoin('round') },
} </script>
|