Vue3 + Canvas轻松实现鼠标框选功能：赋能您的网页交互

2022-12-26 14:59:25

利用 Vue 3 和 Canvas 实现鼠标框选：打造交互式 web 应用程序

简介

鼠标框选是一种在 web 应用程序中常见的功能，它允许用户选择和操作应用程序界面中的区域。在本文中，我们将探究如何在 Vue 3 中使用 Canvas 实现鼠标框选功能，从而帮助您轻松创建交互式且用户友好的应用程序。

创建 Vue 3 项目

第一步是创建一个 Vue 3 项目。您可以使用 Vue CLI（Vue 命令行界面）轻松完成此步骤：

vue create my-mouse-selection-app

安装 Canvas 依赖项

在您的项目中安装 Canvas 依赖项：

npm install canvas

在组件中使用 Canvas

接下来，在您的 Vue 组件中导入 Canvas 依赖项并将其注册为局部组件：

import Canvas from 'canvas';

export default {
  components: {
    Canvas,
  },
};

创建 Canvas 元素

在组件模板中，创建一个 Canvas 元素并为其指定宽度和高度：

<canvas ref="canvas" width="600" height="400"></canvas>

获取 Canvas 上下文

在组件的 mounted 钩子中，获取 Canvas 的上下文以进行绘制操作：

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

监听鼠标事件

接下来，监听 Canvas 的鼠标事件以捕获用户的框选操作：

mounted() {
  this.$refs.canvas.addEventListener('mousedown', this.startDraw);
  this.$refs.canvas.addEventListener('mousemove', this.draw);
  this.$refs.canvas.addEventListener('mouseup', this.endDraw);
}

绘制框选区域

在组件中定义绘制框选区域的方法：

draw(e) {
  if (this.isDrawing) {
    this.ctx.fillRect(this.startX, this.startY, e.clientX - this.startX, e.clientY - this.startY);
  }
}

选中框选区域中的元素

下一步是定义一个方法来选中框选区域中的元素：

selectElements(e) {
  const rect = this.$refs.canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  for (let i = 0; i < this.elements.length; i++) {
    const element = this.elements[i];
    if (x >= element.left && x <= element.right && y >= element.top && y <= element.bottom) {
      this.selectedElements.push(element);
    }
  }
}

设置框选区域中的元素的背景颜色

最后，定义一个方法来设置框选区域中元素的背景颜色：

setBackgroundColor(color) {
  for (let i = 0; i < this.selectedElements.length; i++) {
    const element = this.selectedElements[i];
    element.style.backgroundColor = color;
  }
}

支持 Shift 和 Ctrl 键追加选中

对于更高级的交互，您可以支持 Shift 和 Ctrl 键以追加选中：

mounted() {
  this.$refs.canvas.addEventListener('keydown', this.handleKeyDown);
  this.$refs.canvas.addEventListener('keyup', this.handleKeyUp);
}

handleKeyDown(e) {
  if (e.key === 'Shift') {
    this.isShiftKeyDown = true;
  } else if (e.key === 'Ctrl') {
    this.isCtrlKeyDown = true;
  }
}

handleKeyUp(e) {
  if (e.key === 'Shift') {
    this.isShiftKeyDown = false;
  } else if (e.key === 'Ctrl') {
    this.isCtrlKeyDown = false;
  }
}

代码示例

以下是示例代码，展示了如何将上述功能集成到 Vue 3 组件中：

<template>
  <div>
    <canvas ref="canvas" width="600" height="400"></canvas>
    <button @click="selectElements">Select Elements</button>
    <button @click="setBackgroundColor('red')">Set Background Color</button>
  </div>
</template>

<script>
import Canvas from 'canvas';

export default {
  components: {
    Canvas,
  },
  data() {
    return {
      ctx: null,
      elements: [],
      selectedElements: [],
      isDrawing: false,
      startX: 0,
      startY: 0,
      isShiftKeyDown: false,
      isCtrlKeyDown: false,
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.$refs.canvas.addEventListener('mousedown', this.startDraw);
    this.$refs.canvas.addEventListener('mousemove', this.draw);
    this.$refs.canvas.addEventListener('mouseup', this.endDraw);
    this.$refs.canvas.addEventListener('keydown', this.handleKeyDown);
    this.$refs.canvas.addEventListener('keyup', this.handleKeyUp);
  },
  methods: {
    startDraw(e) {
      this.isDrawing = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    draw(e) {
      if (this.isDrawing) {
        this.ctx.fillRect(this.startX, this.startY, e.clientX - this.startX, e.clientY - this.startY);
      }
    },
    endDraw(e) {
      this.isDrawing = false;
      this.selectElements(e);
    },
    selectElements(e) {
      const rect = this.$refs.canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      for (let i = 0; i < this.elements.length; i++) {
        const element = this.elements[i];
        if (x >= element.left && x <= element.right && y >= element.top && y <= element.bottom) {
          if (this.isShiftKeyDown || this.isCtrlKeyDown) {
            this.selectedElements.push(element);
          } else {
            this.selectedElements = [element];
          }
        }
      }
    },
    setBackgroundColor(color) {
      for (let i = 0; i < this.selectedElements.length; i++) {
        const element = this.selectedElements[i];
        element.style.backgroundColor = color;
      }
    },
    handleKeyDown(e) {
      if (e.key === 'Shift') {
        this.isShiftKeyDown = true;
      } else if (e.key === 'Ctrl') {
        this.isCtrlKeyDown = true;
      }
    },
    handleKeyUp(e) {
      if (e.key === 'Shift') {
        this.isShiftKeyDown = false;
      } else if (e.key === 'Ctrl') {
        this.isCtrlKeyDown = false;
      }
    },
  },
};
</script>