第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

獲取點(diǎn)擊圖片的位置

獲取點(diǎn)擊圖片的位置

慕后森 2023-04-01 15:58:59
我希望能夠獲得圖像中點(diǎn)擊的位置。我想獲取圖像本身的坐標(biāo),而不是頁面容器中的坐標(biāo)。我最接近的是這樣的:<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'@Componentexport 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>但是當(dāng)單擊圖像時,我在圖像中得到以下點(diǎn)(該點(diǎn)不完全是我單擊的位置)我想準(zhǔn)確地了解我點(diǎn)擊圖片的位置
查看完整描述

1 回答

?
白板的微信

TA貢獻(xiàn)1883條經(jīng)驗 獲得超3個贊

答案是一個非常簡單的解決方案。替換event.pageX - this.$refs.image.offsetTopevent.offsetX.

來自 MDN 文檔:

MouseEvent 接口的 offsetX 只讀屬性提供鼠標(biāo)指針在該事件和目標(biāo)節(jié)點(diǎn)的填充邊緣之間的 X 坐標(biāo)偏移量。

對比

MouseEvent 接口的 pageX 只讀屬性返回單擊鼠標(biāo)時相對于整個文檔左邊緣的 X(水平)坐標(biāo)(以像素為單位)。這包括當(dāng)前不可見的文檔的任何部分。


查看完整回答
反對 回復(fù) 2023-04-01
  • 1 回答
  • 0 關(guān)注
  • 214 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號