vue3 最佳化ai生成的手寫簽名

jiduoduo發表於2024-04-20
VueAI

下面是baidu ai生成的程式碼：

在Vue 3中實現手寫簽名功能，可以使用canvas元素來建立一個繪圖區域，並監聽滑鼠事件來實現簽名的記錄。以下是一個簡單的例子：

vue
<template>
  <div>
    <canvas
      ref="signatureCanvas"
      @mousedown="startSigning"
      @mousemove="updateSigning"
      @mouseup="endSigning"
      width="400"
      height="200"
      style="border: 1px solid #000;"
    ></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const signatureCanvas = ref(null);
const ctx = ref(null);

const startSigning = (event) => {
  event.preventDefault();
  ctx.value.beginPath();
  const pos = getCoordinates(event);
  ctx.value.moveTo(pos.x, pos.y);
  ctx.value.lineWidth = 2;
  ctx.value.lineCap = 'round';
  ctx.value.strokeStyle = '#000';
};

const updateSigning = (event) => {
  event.preventDefault();
  if (ctx.value) {
    const pos = getCoordinates(event);
    ctx.value.lineTo(pos.x, pos.y);
    ctx.value.stroke();
  }
};

const endSigning = () => {
  ctx.value.closePath();
};

const getCoordinates = (event) => {
  const rect = signatureCanvas.value.getBoundingClientRect();
  return { x: event.clientX - rect.left, y: event.clientY - rect.top };
};

onMounted(() => {
  ctx.value = signatureCanvas.value.getContext('2d');
});
</script>
在這個例子中，我們建立了一個canvas元素，並在元件掛載時獲取其上下文。然後，我們定義了三個處理滑鼠事件的函式：startSigning、updateSigning和endSigning。startSigning函式開始記錄路徑，updateSigning函式在滑鼠移動時繼續記錄路徑，而endSigning函式結束當前路徑。getCoordinates函式用於獲取正確的座標，以便在canvas上繪製。

上面的程式碼，基本上是對的，但是在具體的環境中，有二個問題：

1、執行起來就是連筆畫，一直不會停。

2、會直接報錯：null根本就獲取不到context

ctx.value = signatureCanvas.value.getContext('2d'); 

因為在onMounted裡這個ref還是沒有值的情況。

以上的二個問題解決：

1）定義 const isDrawing = ref(false);

mousedown的時候true

mouseup的時候false

2)watch中來監聽這個值：然後取值：

  watch(signatureCanvas, (newValue, oldValue) => {
    ctx.value = signatureCanvas.value.getContext('2d');
  });

最後上一個開源的：

https://github.com/JaimeCheng/vue-esign

相關文章