uni-app 之Cavase画布签名

<template>
  <view>
    <view class="title">请在下面输入签名：</view>

    <canvas
      class="mycanvas"
      disable-scroll="true"
      canvas-id="Canvas"
      id="Canvas"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      @touchcancel="touchcancel"
    >
    </canvas>
    <view class="footer">
      <view class="left" @click="finish">完成</view>
      <view class="right" @click="clear">清除</view>
    </view>
  </view>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      ctx: "", //绘图图像
      points: [], //启动点集合,
      item: null,
      len: 0,
    };
  },
  onLoad(e) {
      
      
    console.log(e);
    this.ctx = uni.createCanvasContext("Canvas");
    this.ctx.lineCap = "round";
    this.ctx.lineWidth = 5;
    this.ctx.lineJoin = "round";
    this.item = window.location.search.substr(1);
  },
  methods: {
      
      
    finish() {
      
      
      if (this.len < 2) {
      
      
        uni.showToast({
      
      
          title: "请先签名",
          duration: 2000,
        });
        return;
      }
      let that = this;
      uni.canvasToTempFilePath({
      
      
        canvasId: "Canvas",
        success: (res) => {
      
      
          that.config
            .postRequestFile(
              "/sup/seSiteCheckRecording/updatingSignature",
              res.tempFilePath,
              {
      
      
                fkId: that.item,
                tableName: "sup_plan_list",
              }
            )
            .then((res) => {
      
      
              var res = JSON.parse(res);
              if (res.code == 0) {
      
      
                uni.showToast({
      
      
                  title: "上传成功",
                  duration: 2000,
                });
              } else {
      
      
                uni.showToast({
      
      
                  title: "上传失败",
                  duration: 2000,
                });
              }
            })
            .catch((err) => {
      
      
              console.log(err);
            });
        },
      });
    },
    clear() {
      
      
      let that = this;
      that.len = 0;
      uni.getSystemInfo({
      
      
        success: function (res) {
      
      
          console.log(res);
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.ctx.clearRect(0, 0, canvasw, canvash);
          that.ctx.draw(true);
        },
      });
    },
    touchstart(e) {
      
      
      let x = e.changedTouches[0].x;
      let y = e.changedTouches[0].y;
      let startPoint = {
      
       X: x, Y: y };
      this.points.push(startPoint);
      this.ctx.beginPath();
      e.preventDefault();
    },
    touchmove(e) {
      
      
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      this.points.push({
      
       X: moveX, Y: moveY });
      this.len = this.points.length;
      if (this.len > 2) {
      
      
        this.line();
      }
      e.preventDefault();
    },
    touchend(e) {
      
      
      let endX = e.changedTouches[0].x;
      let endY = e.changedTouches[0].y;
      this.points = [];
      e.preventDefault();
    },
    touchcancel(e) {
      
      
      e.preventDefault();
    },

    line() {
      
      
      let point1 = this.points[0];
      let point2 = this.points[1];
      this.points.shift();
      this.ctx.moveTo(point1.X, point1.Y);
      this.ctx.lineTo(point2.X, point2.Y);
      this.ctx.stroke();
      this.ctx.draw(true);
    },
  },
};
</script>

<style>
.title {
      
      
  height: 50upx;
  line-height: 50upx;
  font-size: 16px;
}
.mycanvas {
      
      
  width: 100%;
  height: calc(100vh - 200upx);
  background-color: #ececec;
}
.footer {
      
      
  font-size: 16px;
  height: 150upx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left,
.right {
      
      
  line-height: 100upx;
  height: 100upx;
  width: 250upx;
  text-align: center;
  font-weight: bold;
  color: white;
  border-radius: 5upx;
}
.left {
      
      
  background: #007aff;
}
.right {
      
      
  background: orange;
}
</style>