hainan_2024_zhenghe/h5/pages/user/fenzhen/qijian.vue

<template>
  <view class="p-20rpx w-full h-[calc(100vh-93rpx)] box-border bg-#fff">
    <view class="canvasBox">
      <!-- <view class="title">请在下面输入签名：</view> -->
      <canvas
        class="mycanvas"
        id="myCanvas"
        canvas-id="mycanvas"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      ></canvas>
    </view>
    <view class="footer">
      <view class="left" @click="clear">清除</view>
      <view class="right" @click="finish">确认</view>
    </view>
  </view>
</template>

<script>
// var x = 20;
// var y = 20;
import { $api, $response } from "@/api";
import {onLoad} from "@dcloudio/uni-app";
export default {
  data() {
    return {
      ctx: "", //绘图图像
      points: [], //路径点集合
	  id:"",
	  xmid:"",
	  tj_number:""
    };
  },
  onLoad(e){
	  this.id=e.id,
	  this.xmid=e.xmid,
	  this.tj_number=e.tj_number
  },
  mounted() {
    var canvas = document.getElementById("myCanvas");
    console.log(canvas.offsetWidth);
    console.log(canvas.offsetHeight);
    this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象

    //设置画笔样式
    this.ctx.lineWidth = 4;
    this.ctx.lineCap = "round";
    this.ctx.lineJoin = "round";
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  },
  methods: {
    //触摸开始，获取到起点
    touchstart: function (e) {
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = { X: startX, Y: startY };
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },

    //触摸移动，获取到路径点
    touchmove: function (e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = { X: moveX, Y: moveY };
      this.points.push(movePoint); //存点
      let len = this.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
    },

    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend: function () {
      this.points = [];
    },

    /* ***********************************************
			#   绘制笔迹
			#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
			#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
			#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
			************************************************ */
    draw: function () {
      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);
    },

    //清空画布
    clear: function () {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.ctx.clearRect(0, 0, canvasw, canvash);
          that.ctx.draw(true);
        },
      });
    },

    //完成绘画并保存到本地
    finish: function () {
		   var that=this
      uni.showLoading({
        title: "加载中...",
      });
      uni.canvasToTempFilePath({
        canvasId: "mycanvas",
        success: async function (res) {
          let path = res.tempFilePath;
          console.log(that.id);
          let obj = {
            path:path,
			id:that.id,
			xmid:that.xmid,
			tj_number:that.tj_number
          };
          const response = await $api("FenzhenAbandon", obj);
          $response(response, () => {
            if (response.status) {
              uni.showToast({
                title: response.msg,
                icon: "success",
                success: function () {
                  let time = setTimeout(() => {
                    clearTimeout(time);
                    uni.navigateBack();
                  }, 1000);
                },
              });
            }
            uni.hideLoading();
          });
        },
      });
    },
  },
};
</script>

<style>
.title {
  height: 50rpx;
  line-height: 50rpx;
  font-size: 16px;
}
.mycanvas {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.footer {
  font-size: 16px;
  height: 150rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.right {
  width: 280rpx;
  height: 75rpx;
  background: #239ea3;
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left {
  width: 280rpx;
  height: 75rpx;
  background: #faece6;
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #e95515;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvasBox {
  height: calc(100vh - 300rpx);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 5rpx;
  border: 1px solid rgba(35, 158, 163, 0.48);
}
</style>