vue canvas 拖动

要实现 Vue 和 Canvas 元素的拖动，可以通过以下步骤来实现：

1. 在 Vue 中，使用 ref 获取 Canvas 元素的引用。

2. 在 mounted 钩子中，初始化 Canvas 的一些参数，如宽度、高度等。

3. 在 mounted 钩子中，给 Canvas 元素添加 mousedown、mousemove、mouseup 事件监听器，实现拖动。

4. 在 mousedown 事件中，记录鼠标点击时的位置和 Canvas 元素的起始位置。

5. 在 mousemove 事件中，计算出 Canvas 元素的新位置，并更新 Canvas 元素的位置。

6. 在 mouseup 事件中，取消事件监听器。

以下是一个简单的实现示例：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取 Canvas 元素的引用
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 初始化 Canvas 的一些参数
    canvas.width = 500;
    canvas.height = 500;
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let canvasX = 0;
    let canvasY = 0;

    // 添加事件监听器
    canvas.addEventListener('mousedown', onMouseDown);
    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('mouseup', onMouseUp);

    function onMouseDown(event) {
      isDragging = true;
      startX = event.clientX;
      startY = event.clientY;
      canvasX = canvas.offsetLeft;
      canvasY = canvas.offsetTop;
    }

    function onMouseMove(event) {
      if (isDragging) {
        const offsetX = event.clientX - startX;
        const offsetY = event.clientY - startY;
        canvas.style.left = canvasX + offsetX + 'px';
        canvas.style.top = canvasY + offsetY + 'px';
      }
    }

    function onMouseUp(event) {
      isDragging = false;
    }
  },
};
</script>

<style>
canvas {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

在这个示例中，我们通过鼠标点击和移动事件来实现 Canvas 元素的拖动。当鼠标按下时，我们记录下鼠标的起始位置和 Canvas 元素的起始位置，然后在鼠标移动时计算出 Canvas 元素的新位置，并更新 Canvas 元素的位置。当鼠标抬起时，我们取消事件监听器。