解锁标记图像和地图的强大功能：使用 Vue 构建动态拖放框选组件

2024-01-13 08:36:24

前言

标记图像和地图在各个行业都至关重要，从医学图像分析到地理信息系统。借助现代 Web 技术，现在可以轻松创建动态的、可定制的标记组件。本文将重点介绍如何使用 Vue.js 构建一个这样的组件，让你能够在图像和地图上直观地创建和管理框选。

构建 Vue 拖放框选组件

1. 项目初始化

创建一个新的 Vue 项目并安装所需的依赖项：

vue create my-vue-annotation-tool
cd my-vue-annotation-tool
npm install --save vue-draggable-resizable

2. 创建组件

在 src/components 目录中创建一个新的 Vue 组件：

// src/components/AnnotationBox.vue

<template>
  <div
    :style="{
      position: 'absolute',
      top: `${top}px`,
      left: `${left}px`,
      width: `${width}px`,
      height: `${height}px`,
    }"
    @mousedown="onMouseDown"
  >
    <div class="handle"></div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import draggable from 'vue-draggable-resizable';

export default {
  components: { draggable },
  props: {
    top: { type: Number, default: 0 },
    left: { type: Number, default: 0 },
    width: { type: Number, default: 100 },
    height: { type: Number, default: 100 },
  },
  setup() {
    const top = ref(0);
    const left = ref(0);
    const width = ref(100);
    const height = ref(100);
    const isDragging = ref(false);

    const onMouseDown = (e) => {
      if (e.target.classList.contains('handle')) {
        isDragging.value = true;
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);
      }
    };

    const onMouseMove = (e) => {
      if (isDragging.value) {
        const dx = e.clientX - left.value;
        const dy = e.clientY - top.value;

        left.value += dx;
        top.value += dy;
      }
    };

    const onMouseUp = () => {
      isDragging.value = false;
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
    };

    return {
      top,
      left,
      width,
      height,
      onMouseDown,
    };
  },
};
</script>

3. 集成到应用程序

在你的 Vue 应用程序中，你可以通过以下方式使用 AnnotationBox 组件：

<template>
  <div>
    <AnnotationBox
      v-for="box in boxes"
      :key="box.id"
      :top="box.top"
      :left="box.left"
      :width="box.width"
      :height="box.height"
    />
  </div>
</template>

<script>
import AnnotationBox from './components/AnnotationBox.vue';

export default {
  components: { AnnotationBox },
  data() {
    return {
      boxes: [],
    };
  },
  methods: {
    createBox(e) {
      const rect = e.target.getBoundingClientRect();
      const newBox = {
        id: this.boxes.length + 1,
        top: e.clientY - rect.top,
        left: e.clientX - rect.left,
        width: 100,
        height: 100,
      };
      this.boxes.push(newBox);
    },
  },
};
</script>