ui-ddy-pc 0.0.1-beta

package/src/components/topSign/topSign.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="sign-container" :style="setDynamicVars">
+    <div class="canvas-container">
+      <canvas ref="canvasRef" @mousemove="draw" @mousedown="startDrawing" @mouseup="finishDrawing" id="canvas-id"
+        canvas-id="canvas-id" :class="{ 'uni-canvas-style': isUniCanvas() }"></canvas>
+    </div>
+    <div class="actions-box">
+      <button @click="clearCanvas" class="commn-btn">清除</button>
+      <button @click="saveSignature" class="commn-btn">保存</button>
+      <button @click="undo" class="commn-btn">撤销</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ctx: null,
+      signatureImage: '',
+      actionHeight: 0,
+      isDrawing: false,
+      paths: [],  // 保存绘制的路径数据
+      currentPath: [],
+    }
+  },
+  methods: {
+    startDrawing(event) {
+      this.isDrawing = true;
+      this.currentPath = []; // 创建新的路径
+      const rect = this.$refs.canvasRef.getBoundingClientRect();
+      // 修正按下位置相对于画布的位置
+      const x = (event.clientX - rect.left) * (this.$refs.canvasRef.width / rect.width);
+      const y = (event.clientY - rect.top) * (this.$refs.canvasRef.height / rect.height);
+      this.ctx.beginPath();
+      this.ctx.moveTo(x, y);
+      this.currentPath.push({ x, y });
+    },
+
+    draw(event) {
+      if (!this.isDrawing) return;
+      if (this.currentPath.length > 0) {
+        const rect = this.$refs.canvasRef.getBoundingClientRect();
+        const x = (event.clientX - rect.left) * (this.$refs.canvasRef.width / rect.width);
+        const y = (event.clientY - rect.top) * (this.$refs.canvasRef.height / rect.height);
+        this.ctx.lineWidth = 2;
+
+        this.ctx.strokeStyle = "#000000";//线条的颜色
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+
+        // 将路径数据保存到数组中
+        this.currentPath.push({ x, y });
+      }
+    },
+    undo() {
+      this.paths.pop(); // 删除最后一条路径
+      // 清空画布
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height);
+      // 重新绘制除最后一条路径之外的所有路径
+      for (let path of this.paths) {
+        for (let i = 0; i < path.length - 1; i++) {
+          const { x, y } = path[i];
+          if (i === 0) {
+            this.ctx.beginPath();
+            this.ctx.moveTo(x, y);
+          } else {
+            this.ctx.lineTo(x, y);
+            this.ctx.stroke();
+          }
+        }
+      }
+    },
+    finishDrawing(event) {
+      if (this.currentPath.length > 0) {
+        this.paths.push(this.currentPath); // 将当前路径添加到路径数组
+      }
+      this.isDrawing = false;
+    },
+
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height);
+      this.signatureImage = '';
+      this.paths = []; // 清空路径记录
+      this.$emit('saveSignature', '', false)
+    },
+
+    saveSignature() {
+      // toDo: uni框架转成的base64无type前缀 需统一
+      this.signatureImage = this.$refs.canvasRef.toDataURL();
+      this.$emit('saveSignature', this.signatureImage, true)
+    },
+    isUniCanvas() {
+      return this.$refs.canvasRef?.getContext ? false : true
+    }
+  },
+  computed: {
+    setDynamicVars() {
+      return {
+        "--action-height": `${this.actionHeight}px`
+      };
+    }
+  },
+  watch: {
+    setDynamicVars(newVal) {
+      let canvasContainer = document.querySelector('.canvas-container');
+      if (canvasContainer) {
+        // 解决锯齿及模糊
+        this.$refs.canvasRef.width = canvasContainer.offsetWidth
+        this.$refs.canvasRef.height = canvasContainer.offsetHeight - this.actionHeight
+      }
+    }
+  },
+  mounted() {
+    this.actionHeight = document.querySelector('.actions-box')?.offsetHeight;
+    this.ctx = this.$refs.canvasRef.getContext('2d');
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.sign-container {
+  width: 100%;
+  height: 100%;
+
+  .canvas-container {
+    position: relative;
+    width: 100%;
+    height: calc(100% - var(--action-height));
+    border: 1px solid;
+
+    #canvas-id {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .actions-box {
+    width: 100%;
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
+    background: #fff;
+    display: flex;
+    justify-content: space-evenly;
+    padding: 10px 0 10px 0;
+    padding: 10px 0 10px 0;
+
+    .commn-btn {
+      background: #409EFF;
+      border-color: #409EFF;
+      color: #FFF;
+      border-radius: 4px;
+      padding: 10px 20px;
+      border: 1px solid #DCDFE6;
+      font-size: 14px;
+
+      &:hover {
+        background: #66b1ff;
+        border-color: #66b1ff;
+      }
+    }
+  }
+}
+
+.uni-canvas-style {
+  width: 100%;
+  height: 100%;
+}
+</style>