uniapp手写签名实现

1
2
3
4
5
6
7
8
9
10
11
<canvas 
  canvas-id="firstCanvas" 
  disable-scroll='true' 
  @touchmove='move' 
  @touchstart='start($event)'
  @touchend='end'
  @touchcancel='cancel' 
  @longtap='tap' 
  @error='error'
>
</canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
let content = null
let touchs = [];
let canvasw = 0;
let canvash = 0;

export default {

  onLoad() {
    //获得Canvas的上下文
    content = uni.createCanvasContext('firstCanvas')
    //设置线的颜色
    content.setStrokeStyle("#000")
    //设置线的宽度
    content.setLineWidth(5)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
  },
  methods: {
    // 画布的触摸移动开始手势响应
    start: function(event) {
      //获取触摸开始的 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)
      }
    },

    // 画布的触摸移动结束手势响应
    end: function(e) {
      console.log("触摸结束" + e)
      // 设置为已经签名
      this.isEnd = true
      // 清空轨迹数组
      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() {
      // 设置为未签名
      this.isEnd = false
      //清除画布
      content.clearRect(0, 0, canvasw, canvash)
      content.draw(true)
    },
    // 签名完成，将canvas转为图片，同时获得图片的临时路径
    overSign() {
      uni.canvasToTempFilePath({
            canvasId: 'firstCanvas',
            success: function(res) {
              // 得到 图片的临时路径
              const srcUrl = res.tempFilePath
              // 可以通过 plus.io.resolveLocalFileSystemURL获取file对象
              // 通过 plus.io.FileReader().readAsDataURL(file)将file转为base64格式
            }
          })
    }
  }
}