vue实现图片打点

实现图片打点的基本思路

在Vue中实现图片打点功能，通常需要监听图片加载完成事件，获取图片的尺寸和位置信息，然后在图片上添加可交互的标记点。可以通过CSS定位和事件处理来实现。

使用绝对定位实现打点

创建一个图片容器，设置相对定位，打点元素使用绝对定位。通过计算点击位置相对于图片的坐标来放置标记点。

<template>
  <div class="image-container" ref="imageContainer">
    <img 
      :src="imageUrl" 
      @load="handleImageLoad" 
      @click="handleImageClick"
    />
    <div 
      v-for="(point, index) in points" 
      :key="index"
      class="point" 
      :style="{
        left: `${point.x}px`,
        top: `${point.y}px`
      }"
      @click.stop="handlePointClick(index)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url.jpg',
      points: [],
      imageWidth: 0,
      imageHeight: 0
    }
  },
  methods: {
    handleImageLoad(event) {
      const img = event.target
      this.imageWidth = img.width
      this.imageHeight = img.height
    },
    handleImageClick(event) {
      const rect = this.$refs.imageContainer.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top
      this.points.push({ x, y })
    },
    handlePointClick(index) {
      this.points.splice(index, 1)
    }
  }
}
</script>

<style>
.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
}

.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
</style>

实现可拖拽的打点

如果需要让标记点可以拖动，可以添加拖拽事件处理。

methods: {
  startDrag(index, event) {
    this.draggingIndex = index
    this.startX = event.clientX
    this.startY = event.clientY
    document.addEventListener('mousemove', this.handleDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  handleDrag(event) {
    if (this.draggingIndex !== null) {
      const rect = this.$refs.imageContainer.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top
      this.points[this.draggingIndex] = { x, y }
    }
  },
  stopDrag() {
    this.draggingIndex = null
    document.removeEventListener('mousemove', this.handleDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  }
}

然后在模板中添加拖拽事件：

<div 
  v-for="(point, index) in points" 
  :key="index"
  class="point" 
  :style="{
    left: `${point.x}px`,
    top: `${point.y}px`
  }"
  @mousedown="startDrag(index, $event)"
></div>

响应式处理图片尺寸变化

如果图片尺寸可能变化，需要监听容器大小变化并重新计算标记点位置。

mounted() {
  this.resizeObserver = new ResizeObserver(() => {
    const img = this.$refs.imageContainer.querySelector('img')
    if (img) {
      this.imageWidth = img.width
      this.imageHeight = img.height
    }
  })
  this.resizeObserver.observe(this.$refs.imageContainer)
},
beforeDestroy() {
  this.resizeObserver.disconnect()
}

保存和加载打点数据

可以将打点数据保存为相对于图片宽高的百分比，这样在不同尺寸下显示更准确。

methods: {
  handleImageClick(event) {
    const rect = this.$refs.imageContainer.getBoundingClientRect()
    const xPercent = (event.clientX - rect.left) / this.imageWidth * 100
    const yPercent = (event.clientY - rect.top) / this.imageHeight * 100
    this.points.push({ xPercent, yPercent })
  },
  getPointStyle(point) {
    return {
      left: `${point.xPercent * this.imageWidth / 100}px`,
      top: `${point.yPercent * this.imageHeight / 100}px`
    }
  }
}

在模板中使用getPointStyle方法：

<div 
  v-for="(point, index) in points" 
  :key="index"
  class="point" 
  :style="getPointStyle(point)"
></div>

使用第三方库简化实现

如果需要更复杂的功能，可以考虑使用第三方库如fabric.js或konva.js，它们提供了更丰富的图形操作功能。

npm install konva

使用Konva实现示例：

import { Stage, Layer, Image, Circle } from 'konva'

export default {
  mounted() {
    this.initKonva()
  },
  methods: {
    initKonva() {
      const stage = new Stage({
        container: 'container',
        width: 800,
        height: 600
      })

      const layer = new Layer()
      stage.add(layer)

      const img = new Image({
        image: new window.Image()
      })

      img.image.src = this.imageUrl
      img.image.onload = () => {
        img.width(img.image.width)
        img.height(img.image.height)
        layer.add(img)
        layer.draw()

        stage.on('click', (e) => {
          const pos = stage.getPointerPosition()
          const circle = new Circle({
            x: pos.x,
            y: pos.y,
            radius: 5,
            fill: 'red',
            draggable: true
          })
          layer.add(circle)
          layer.draw()
        })
      }
    }
  }
}

这些方法提供了不同复杂度的实现方案，可以根据项目需求选择适合的方式。