mpvue簽字簽字版

<template>
  <div class="wrapper">
    <div class="left-btn-area">
      <button @click="clearClick" class="clean-btn">清除</button>
      <button @click="saveClick" class="save-btn">完成</button>
      <span class="left-tips">因採用OCR識別技術，請採用正楷字體簽名</span>
    </div>

    <div class="center-sign-area">
      <canvas class='firstCanvas'
              canvas-id="firstCanvas"
              @touchmove='move'
              @touchend='end'
              @error="error"
              disable-scroll='true'>
      </canvas>
    </div>
    <div class="right-title-area">
      <div class="right-title">簽字板</div>
    </div>
  </div>
</template>

<script>
let content = null
let touchs = []
let canvasw = 0
let canvash = 0
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowWidth
    canvash = canvasw * 9 / 16
  }
})
export default {
  data () {
    return {
      signImage: ''
    }
  },
  created () {
  },
  onLoad () {
    content = wx.createCanvasContext('firstCanvas', this)
    content.setStrokeStyle('#000000')
    content.setLineWidth(5)
    content.setLineCap('round')
    content.setLineJoin('round')
  },
  methods: {
    error (e) {
      wx.showModal({
        title: 'yes11'
      })
    },
    move (e) {
      let point = {x: e.touches[0].x, y: e.touches[0].y}
      touchs.push(point)
      if (touchs.length >= 2) {
        this.draw(touchs)
      }
    },
    end (e) {
      for (let i = 0; i < touchs.length; i++) {
        touchs.pop()
      }
    },
    clearClick () {
      content.clearRect(0, 0, canvasw, canvash)
      content.draw(true)
    },
    saveClick () {
      let that = this
      wx.canvasToTempFilePath({
        canvasId: 'firstCanvas',
        success: function (res) {
          that.signImage = res.tempFilePath
          console.log(res.tempFilePath)
          that.$emit('success', that.signImage)
        }
      }, this)
    },
    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)
    }
  }
}
</script>

<style scoped lang="wxss">

  page {
    background: #fbfbfb;
    height: auto;
    overflow: hidden;
  }

  .wrapper {
    width: 100%;
    height: 95vh;
    margin: 30rpx 0;
    overflow: hidden;
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    font-size: 28rpx;
  }

  .right-title-area {
    display: inline-flex;
    align-items: center;
  }

  .center-sign-area {
    border: 4rpx dashed #e9e9e9;
    flex: 5;
    overflow: hidden;
    box-sizing: border-box;
  }
  .firstCanvas {
    background-color: #fff;
    width: 100%;
    height: 100%;
  }

  .right-title {
    transform: rotate(90deg);
    flex: 1;
    color: #666;
  }

  .left-btn-area button {
    font-size: 28rpx;
  }

  .left-btn-area {
    height: 95vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    flex: 1;
  }

  .clean-btn {
    position: absolute;
    top: 50rpx;
    left: 0rpx;
    transform: rotate(90deg);
    color: #666;
  }

  .left-tips {
    position: absolute;
    align-items: center;
    color: red;
    display: inline-flex;
    transform: rotate(90deg);
    left: -320rpx;
    width: 100%;
    top: 55%;
  }

  .clean-btn image {
    position: absolute;
    top: 13rpx;
    left: 25rpx;
  }

  .save-btn {
    position: absolute;
    bottom: 52rpx;
    left: -3rpx;
    display: inline-flex;
    transform: rotate(90deg);
    background: #008ef6;
    color: #fff;
    margin-bottom: 30rpx;
    text-align: center;
    justify-content: center;
  }
</style>

改編自https://www.cnblogs.com/changyaoself/p/9596276.html   侵刪