如何獲得正確的鼠標位置相對於已應用比例變換的div

我正在使用css變換比例在div上創建平滑縮放。問題是我希望能夠得到正確的鼠標相對於div的位置，即使放大時，但我似乎找出正確的算法來獲取這些數據。我從如何獲得正確的鼠標位置相對於已應用比例變換的div

var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform); 
scale = transform.a;

檢索當前的比例因子當我看到div的位置在不同的縮放設置似乎當我縮放DIV，直至較大的屏幕上的位置，以報告正確的位置，即左邊和頂部的值是負的，似乎是正確的，因爲不返回的分度值：

$("#zoom_div").position().left 
$("#zoom_div").position().top

爲了得到當前鼠標的位置我讀從Click事件的X和Y位置，帶走了偏移。這可以在比例值爲1（無比例）時正常工作，但在div放大時不會發生。這是我的基本代碼：

$("#zoom_div").on("click", function(e){ 
    var org = e.originalEvent; 

    var pos = $("#zoom_div").position(); 

    var offset = { 
     x:org.changedTouches[0].pageX - pos.left, 
     y:org.changedTouches[0].pageY - pos.top 
    } 

    var rel_x_pos = org.changedTouches[0].pageX - offset.x; 
    var rel_y_pos = org.changedTouches[0].pageY - offset.y; 

    var rel_pos = [rel_x_pos, rel_y_pos]; 
    return rel_pos; 
});

我已經在乘以劃分添加和從pageX屬性/ Y，但沒有任何運氣減去比例因子/多次嘗試。任何人都可以幫助我弄清楚如何獲得正確的價值。我從原始代碼中簡化了我的代碼，希望能夠讓我的問題更清楚，在上面的代碼中可能發現的任何錯誤都是由於編輯失敗導致的。

爲了說明我在說什麼，我做了一個快速的jsfiddle示例，允許使用translate3d拖動div。當比例正常時（1）div在被點擊的位置被拖動。當div放大時（2）它不再從點擊點正確拖動。

http://jsfiddle.net/6EsYG/12/

來源

2013-03-17 Finglish

將是很好，如果你可以用這個:) – Lipis 2013-03-18 14:29:57

準備的jsfiddle @Lipis我添加了一個例子的jsfiddle我 – Finglish 2013-03-19 23:34:20

喜歡這個問題...但它的複雜就像我怎樣才能知道我的獨角獸的速度時，它的一邊吃菠菜一邊飛行：D – 2013-03-20 07:47:24

您需要設置的WebKit轉換原點基本上，當你放大時它會從中心開始，這意味着偏移將是錯誤的，0,0將在平方中心開始，但是如果你將原點設置爲最高點當它縮放時，它將保持正確的座標。這是你如何設置的由來：

#zoom_div{ 
    -webkit-transform-origin: 0 0; 
}

這種結合乘以比例失調爲我工作：

offset = { 
    "x" : x * scale, 
    "y" : y * scale 
}

View jsFiddle Demo

來源

2013-03-20 11:04:51 jnpWebDeveloper

不使用event.pageX - pos.left，但event.offsetX（或某些瀏覽器：event.originalEvent.layerX

div.on('click',function(e) { 
    var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX; 
    var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY; 
});

看到我的jsfiddle爲例：http://jsfiddle.net/Yukulele/LdLZg/

來源

2013-03-18 15:24:45

謝謝。這是一個很好的提示，但它不能解決我的問題。我在上面的問題中添加了一個jsfiddle示例來說明問題。 – Finglish 2013-03-19 23:42:25

謝謝，適合我！ – gordie 2014-11-23 22:34:50

您可以嵌入一個iframe中的縮放內容。在iframe之外擴展以在iframe中啓用縮放的鼠標事件，因爲鼠標事件是文檔範圍。

來源

2015-09-22 09:30:14 Flowkap

如何獲得正確的鼠標位置相對於已應用比例變換的div

回答

相關問題