在vue2中循环出来的canvas 进行拖拽 放大和缩小

在 Vue.js 2 中，如果你想实现一个动态创建的 Canvas 元素数组并允许用户进行拖拽、放大和缩小操作，你可以采用以下步骤：

1. **数据绑定**:
首先，在你的 Vue 实例中创建一个 canvas 渲染区域的数据列表，例如 `items` 数组。

data() {
  return {
    items: [
      { id: 1, x: 0, y: 0, size: 50 },
      // 更多 canvas 对象...
    ],
  };
}

2. **渲染 Canvas**:
使用 v-for 指令遍历这个列表，并为每个元素创建一个独立的 Canvas 元素，同时添加鼠标事件监听器。

<template>
  <div>
    <canvas v-for="(item, index) in items" :key="index" @mousedown="startDrag(item)" :style="{ width: item.size + 'px', height: item.size + 'px' }"></canvas>
  </div>
</template>

3. **拖拽功能**:
创建 `startDrag` 和 `moveCanvas` 方法来处理开始拖动和移动事件，更新对应的 canvas 的位置。

methods: {
  startDrag(item) {
    this.currentDraggingItem = item;
    document.addEventListener('mousemove', this.moveCanvas);
    document.addEventListener('mouseup', this.stopDrag);
  },
  moveCanvas(e) {
    if (this.currentDraggingItem) {
      // 更新 canvas 的位置
      this.currentDraggingItem.x = e.clientX - this.currentDraggingItem.size / 2;
      this.currentDraggingItem.y = e.clientY - this.currentDraggingItem.size / 2;
    }
  },
  stopDrag() {
    document.removeEventListener('mousemove', this.moveCanvas);
    document.removeEventListener('mouseup', this.stopDrag);
    this.currentDraggingItem = null;
  },
},

4. **缩放和放大**:
可以考虑添加额外的点击事件，如双击放大，然后更改当前选中的 canvas 的大小。这通常涉及监听 `dblclick` 事件，计算新的缩放比例并应用到 canvas 上。

methods: {
  doubleClickZoom(item) {
    const scaleFactor = 1.2; // 缩放比例
    if (!this.isScaling && item === this.currentDraggingItem) {
      this.isScaling = true;
      const newSize = item.size * scaleFactor;
      this.$set(item, 'size', newSize);
      // 添加缩放结束回调
      setTimeout(() => {
        this.isScaling = false;
      }, 300); // 等待一段时间恢复原状
    }
  },
  // ...其他事件处理
},

记得安装和配置相应的库（如 `hammerjs` 或 `@vue-touch`）来提供更好的触摸交互支持，特别是对于触屏设备的放大和缩小操作。