當父/主體進行比例轉換時，獲取元素上的觸摸位置

Question

我需要從移動元素的左邊界獲取確切的鼠標/觸摸位置。

問題是，根據窗口/設備的大小，我的身體使用了transform:scale()縮放。

由於縮放，與元素offsetLeft屬性相關的touch-和mouse-events x ， pageX和clientX屬性值是錯誤的，因此我無法使用它們進行減法運算並獲得正確的位置。

對於mouse-events我只使用offsetX屬性，它可以正常工作。

問題是，沒有帶touch-events offsetX屬性。

我做了一些研究，發現這個問題涉及指針事件 。

我以前從沒聽說過pointer-events ，因此很開心，因為我認為這可以解決我的問題。

但這為我指出了一個新問題。 Safari和ios不支持pointer events 。

由於該應用程序首先是為ipad設計的，因此這是一個大問題。

所以現在我正在尋找可以使用的類似offsetX的屬性，但是沒有。

我知道我可以將例如touch-events pageX乘以倒置比例尺，但是如果我更改樣式的比例尺，這將無法使用，因此無法使用此技術。

//no way to do this:
const windowWidth = window.innerWidth 
let scale = 1
if(windowWidth < 1000) {
  scale = 1.55
} else if(windowWidth < 1101) {
  scale = 1.45
} else if(windowWidth < 1201) {
  scale = 1.35
} else if(windowWidth < 1301) {
  scale = 1.25
} else if(windowWidth < 1401) {
  scale = 1.2
} else if(windowWidth < 1501) {
  scale = 1.12
} else if(windowWidth < 1601) {
  scale = 1.06
}

const x = (e.changedTouches ? (e.changedTouches[0].pageX * scale) - this.offsetLeft : e.offsetX)

我創建了一個演示 ，您可以在其中演示 （在移動和台式機之間切換開發工具/調整縮放比例）。

我的解釋可能有點混亂，請問我是否不清楚。

幫助將不勝感激。

Answer 1

如果只是縮放，請通過獲取當前應用的轉換樣式並對其進行解析來獲取當前的縮放比例，然后除以比例因子。

如果您需要更高的技巧，例如使用旋轉或3D變換，則可以乘以逆變換矩陣：有關詳細信息和代碼，請參見此文章和隨附的jsfiddle。