vue canvas 矩形四角拖拽

在Vue中使用canvas实现矩形四角拖拽的功能可以通过以下步骤实现：

1. 在Vue组件中创建一个canvas元素，并获取其上下文对象：

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

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
  },
}
</script>

2. 定义一个矩形对象，包括位置、大小和颜色等属性：

data() {
  return {
    rect: {
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      color: '#FF0000'
    }
  }
}

3. 在canvas上绘制矩形：

drawRect() {
  const { x, y, width, height, color } = this.rect;
  this.context.strokeStyle = color;
  this.context.strokeRect(x, y, width, height);
}

4. 监听鼠标事件，实现矩形四角的拖拽功能：

methods: {
  handleMouseDown(event) {
    const { offsetX, offsetY } = event;
    const { x, y, width, height } = this.rect;

    // 判断鼠标点击点是否在矩形框内
    if (offsetX >= x && offsetX <= x + width && offsetY >= y && offsetY <= y + height) {
      this.dragging = true;
      this.dragStartX = offsetX;
      this.dragStartY = offsetY;
    }
  },
  handleMouseMove(event) {
    if (this.dragging) {
      const { offsetX, offsetY } = event;
      const { x, y, width, height } = this.rect;

      // 计算鼠标移动的距离
      const dx = offsetX - this.dragStartX;
      const dy = offsetY - this.dragStartY;

      // 更新矩形的位置
      this.rect.x = x + dx;
      this.rect.y = y + dy;

      // 重新绘制矩形
      this.drawRect();

      // 更新拖拽起点
      this.dragStartX = offsetX;
      this.dragStartY = offsetY;
    }
  },
  handleMouseUp() {
    this.dragging = false;
  }
},

5. 在mounted钩子函数中添加事件监听：

mounted() {
  this.canvas = this.$refs.canvas;
  this.context = this.canvas.getContext('2d');

  this.drawRect();

  this.canvas.addEventListener('mousedown', this.handleMouseDown);
  this.canvas.addEventListener('mousemove', this.handleMouseMove);
  this.canvas.addEventListener('mouseup', this.handleMouseUp);
},

通过以上步骤，你可以在Vue中实现canvas矩形四角拖拽的功能。
#### 引用[.reference_title]
- *1* *2* *3* [canvas实现鼠标拖拽矩形移动改变大小](https://blog.csdn.net/weixin_39522486/article/details/111853967)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]