获取点击图片的位置

Question

我希望能够获得图像中点击的位置。我想获取图像本身的坐标，而不是页面容器中的坐标。

我最接近的是这样的：

<template>

  <div class="image-annotation">

    <div style="position: relative">

      <!-- image-annotation__marker class has styles to center place the pointer in a absolute positioning -->

      <div class="image-annotation__marker" :style="markerStyle" />

      <img

          ref="image"

          src="https://lh6.ggpht.com/HlgucZ0ylJAfZgusynnUwxNIgIp5htNhShF559x3dRXiuy_UdP3UQVLYW6c=s1200"

          alt="Art image"

          @click="onClickImage"

      />

    </div>

  </div>

</template>

<script>

import Vue from 'vue'

import Component from 'vue-class-component'

@Component

export default class Counter extends Vue {

  public activeCoordinates: { x: number; y: number } | null = null;

  

  public $refs!: {

    image: HTMLElement

  }

  get hideSecondColumn() {

    return this.activeCoordinates !== null

  }

  get markerStyle() {

    if (this.activeCoordinates === null) return { display: 'none' }

    return {

      top: `${this.activeCoordinates.y}px`,

      left: `${this.activeCoordinates.x}px`,

    }

  }

  public onClickImage(event: MouseEvent) {

    this.activeCoordinates = {

      x: event.pageX - this.$refs.image.offsetTop,

      y: event.pageY - this.$refs.image.offsetLeft,

    }

  }

}

</script>

但是当单击图像时，我在图像中得到以下点（该点不完全是我单击的位置）

我想准确地了解我点击图片的位置

Answer 1

答案是一个非常简单的解决方案。替换event.pageX - this.$refs.image.offsetTop为event.offsetX.来自 MDN 文档：MouseEvent 接口的 offsetX 只读属性提供鼠标指针在该事件和目标节点的填充边缘之间的 X 坐标偏移量。对比MouseEvent 接口的 pageX 只读属性返回单击鼠标时相对于整个文档左边缘的 X（水平）坐标（以像素为单位）。这包括当前不可见的文档的任何部分。