vue3 优化ai生成的手写签名

下面是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