|
@@ -0,0 +1,120 @@
|
|
|
|
+var content = null;
|
|
|
|
+var touchs = [];
|
|
|
|
+var canvasw = 0;
|
|
|
|
+var canvash = 0;
|
|
|
|
+var that = null;
|
|
|
|
+
|
|
|
|
+Page({
|
|
|
|
+ /**
|
|
|
|
+ * 页面的初始数据
|
|
|
|
+ */
|
|
|
|
+ data: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 画布的触摸移动开始手势响应
|
|
|
|
+ start: function (event) {
|
|
|
|
+ // console.log("触摸开始" + event.changedTouches[0].y)
|
|
|
|
+ // console.log("触摸开始" + event.changedTouches[0].x)
|
|
|
|
+ //获取触摸开始的 x,y
|
|
|
|
+ let point = {
|
|
|
|
+ x: event.changedTouches[0].y,
|
|
|
|
+ y: event.changedTouches[0].x
|
|
|
|
+ }
|
|
|
|
+ touchs.push(point)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 画布的触摸移动手势响应
|
|
|
|
+ move: function (e) {
|
|
|
|
+ let point = {
|
|
|
|
+ x: e.touches[0].y,
|
|
|
|
+ y: e.touches[0].x
|
|
|
|
+ }
|
|
|
|
+ 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()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
|
+ */
|
|
|
|
+ onLoad: function (options) {
|
|
|
|
+ that = this
|
|
|
|
+ //获得Canvas的上下文
|
|
|
|
+ content = wx.createCanvasContext('firstCanvas')
|
|
|
|
+ //设置线的颜色
|
|
|
|
+ content.setStrokeStyle("#000")
|
|
|
|
+ //设置线的宽度
|
|
|
|
+ content.setLineWidth(5)
|
|
|
|
+ //设置线两端端点样式更加圆润
|
|
|
|
+ content.setLineCap('round')
|
|
|
|
+ //设置两条线连接处更加圆润
|
|
|
|
+ content.setLineJoin('round')
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
|
+ */
|
|
|
|
+ onReady: function () {
|
|
|
|
+
|
|
|
|
+ // 获取画布尺寸
|
|
|
|
+ var query = wx.createSelectorQuery()
|
|
|
|
+ query.select('#canvas').boundingClientRect()
|
|
|
|
+ query.exec(function (res) {
|
|
|
|
+ canvasw = res[0].width;
|
|
|
|
+ canvash = res[0].height
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //绘制
|
|
|
|
+ draw: function (touchs) {
|
|
|
|
+ let point1 = touchs[0]
|
|
|
|
+ let point2 = touchs[1]
|
|
|
|
+ touchs.shift()
|
|
|
|
+ content.moveTo(point1.y, point1.x)
|
|
|
|
+ content.lineTo(point2.y, point2.x)
|
|
|
|
+ content.stroke()
|
|
|
|
+ content.draw(true)
|
|
|
|
+ },
|
|
|
|
+ //清除操作
|
|
|
|
+ clearClick: function () {
|
|
|
|
+ //清除画布
|
|
|
|
+ content.clearRect(0, 0, canvasw, canvash)
|
|
|
|
+ content.draw(true)
|
|
|
|
+ },
|
|
|
|
+ //保存图片
|
|
|
|
+ saveClick: function () {
|
|
|
|
+ var that = this
|
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
|
+ canvasId: 'firstCanvas',
|
|
|
|
+ success: function (res) {
|
|
|
|
+ //打印图片路径
|
|
|
|
+ var path = res.tempFilePath
|
|
|
|
+ //上传图片
|
|
|
|
+ that.uploadSignPic(path)
|
|
|
|
+ console.log(path)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 上传签名图片
|
|
|
|
+ */
|
|
|
|
+ uploadSignPic: function (path) {
|
|
|
|
+ //具体实现的业务逻辑
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+})
|