小程序功能（七）电子签名

一、在.json里加入强制装换屏幕的配置

"pageOrientation": "landscape"

二、使用用canvas绘制签名

<template>
  <div class="written"
       v-show="status == 'default'">
    <div class="canvasBox">
      <canvas :style="{ width: (canvaw)+'rpx', height: (canvah) + 'rpx' }"
              class="firstCanvas"
              canvas-id="firstCanvas"
              @touchmove="move"
              @touchend="end"
              @error="error"
              disable-scroll="true"></canvas>
      <p class="info"
         v-if="flag">签字方向</p>
    </div>

    <div class="button_clear"
         @click="clearClick()">重写</div>
    <div class="button_submit"
         @click="saveClick()">保存</div>

  </div>
</template>
 
<script>
let content = null;
let touchs = [];
let canvasw = 0;
let canvash = 0;
export default {
  data () {
    return {
      signImage: '',
      imgUrl: '',
      canvaw: 0,
      canvah: 0,
      flag: true,
      status: false
    }
  },
  props: {
    status: {
      type: String,
      default: 'default',
      required: false
    }
  },
  onLoad () {
    var _this = this;
    wx.getSystemInfo({
      success (res) {
        console.log(res)
        canvasw = res.windowWidth;
        canvash = res.windowHeight;
        _this.canvaw = res.windowWidth * 0.75;
        _this.canvah = res.windowHeight * 0.65;
        content = wx.createCanvasContext('firstCanvas', this);
        content.setStrokeStyle("#000000");
        content.setLineWidth(5);
        content.setLineCap('round');
        content.setLineJoin('round')
      },
    });

  },
  methods: {
    error (e) {
      wx.showModal({
        title: "初始化异常，请尝试刷新！"
      });
    },
    move (e) {
      // 开始清空背景图
      if (this.flag) {
        content.clearRect(0, 0, canvasw, canvash);
        this.flag = false;
      }
      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 () {
      var _this = this;
      content.clearRect(0, 0, canvasw, canvash);
      
      this.flag = true;
      content.draw(true)
    },
    //保存
    saveClick () {
      var that = this;
      wx.canvasToTempFilePath({
        canvasId: 'firstCanvas',
        success (res) {
          that.signImage = res.tempFilePath;
          console.log(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>
.canvasBox {
  width: 100%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.info {
  position: absolute;
  font-size: 20rpx;
  opacity: 0.5;
}
.firstCanvas {
  background-color: #fff;
  width: 100%;
  height: 98%;
  border: 1rpx dashed #e9e9e9;
  border-radius: 5rpx;
}

.button_clear {
  position: absolute;
  bottom: 25rpx;
  left: 40rpx;
  width: 80rpx;
  height: 30rpx;
  background-color: #fff;
  border: #d23d44 1px solid;
  text-align: center;
  line-height: 30rpx;
  border-radius: 5rpx;
  color: #d23d44;
  z-index: 10000;
}
.button_submit {
  position: absolute;

  bottom: 25rpx;
  right: 40rpx;
  width: 80rpx;
  height: 30rpx;
  background-color: #d23d44;
  border: #d23d44 1px solid;
  text-align: center;
  line-height: 30rpx;
  border-radius: 5rpx;
  color: #ffffff;
  z-index: 10000;
}
.button:first-of-type {
  border-right: 1px solid #ddd;
}
.button:last-of-type {
  border-left: 1px solid #ddd;
}
.written {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fbfbfb;
  padding: 10rpx 10rpx;
  box-sizing: border-box;
}
</style>

最终效果