vue实现图片框选标注

在Vue中实现图片框选标注，可以通过监听鼠标事件来完成。以下是一个简单的示例，展示了如何使用Vue实现图片框选标注功能：

<template>
  <div class="container">
    <img :src="imageUrl" @mousedown="startSelection" @mousemove="updateSelection" @mouseup="endSelection" alt="Selectable Image">
    <div v-if="selection" class="selection" :style="selectionStyle">
      {{ selection.width }}px x {{ selection.height }}px
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
      start: null,
      end: null,
      selection: null
    };
  },
  computed: {
    selectionStyle() {
      if (!this.selection) return {};
      const { x, y, width, height } = this.selection;
      return {
        position: 'absolute',
        left: `${x}px`,
        top: `${y}px`,
        width: `${width}px`,
        height: `${height}px`
      };
    }
  },
  methods: {
    startSelection(event) {
      this.start = { x: event.clientX, y: event.clientY };
    },
    updateSelection(event) {
      if (this.start) {
        const end = { x: event.clientX, y: event.clientY };
        this.selection = this.calculateSelection(this.start, end);
      }
    },
    endSelection() {
      this.start = null;
    },
    calculateSelection(start, end) {
      const x = Math.min(start.x, end.x);
      const y = Math.min(start.y, end.y);
      const width = Math.abs(end.x - start.x);
      const height = Math.abs(end.y - start.y);
      return { x, y, width, height };
    }
  }
};
</script>
 
<style>
.container {
  position: relative;
  display: inline-block;
}
.selection {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
img {
  display: block;
  max-width: 100%;
}
</style>

在这个例子中，我们有一个Vue组件，它包含一个图片和一个用于显示选区的div。通过监听鼠标事件，我们可以跟踪选区的开始和结束，并计算选区的尺寸。选区的样式通过计算属性动态应用。这个例子提供了一个基本框架，您可以根据需要添加额外的功能，例如处理选区的交互或将选区数据发送到服务器。