獲取畫布點擊座標時，通過變換放大Panzoom

Question

我使用Panzoom放大和平移畫布，我有一些點。

這些點是可點擊的，當沒有縮放畫布時（通過Panzoom），它可以正常工作。

縮放係數爲1時未縮放，2 200％的縮放等。

我有此函數來計算座標時已經搖 - 這樣你就可以左右平移，並單擊它，座標將永遠是相對的。 http://jsfiddle.net/hugef0c7/

點擊黃色正方形，以獲得點擊座標：縮放時，它不工作..

function getCanvasCoords(x,y){ 
    var matrix = $panzoom.panzoom("getMatrix"); 
    var calc_x = x-matrix[4]; 
    var calc_y = y-matrix[5]; 
    return {x:calc_x,y:calc_y}; 
} 

這裏嘗試工作示例它。然後放大並再次點擊它;現在座標因縮放而不同。

有什麼辦法可以計算放大時點擊的座標？

我已經試過類似的事情乘以/除以變焦倍率單擊點，但這並沒有太大的幫助..

Answer 1

第一步是糾正，以使它們相對座標偏移帆布。您可以通過簡單地減去此功能畫布的絕對位置給客戶座標做到這一點：

$(document).mouseup(function(e) { 

    // get canvas rectangle with absolute position of element 
    var rect = myCanvas.getBoundingClientRect(); 

    // subtract position from the global coordinates 
    var coords = getCanvasCoords(e.clientX - rect.left, 
           e.clientY - rect.top); 
    ... 

現在你需要做的是逆變焦倍數（1/factor），回到預期的協調，以及在基質（在索引詞a和d，或0和3），使用刻度值：

function getCanvasCoords(x,y){ 

    var matrix = $panzoom.panzoom("getMatrix"); 

    return { 
     x: x * (1/matrix[0]), // multiply with inverse zoom factor 
     y: y * (1/matrix[3]) 
    }; 
} 

這應該做的工作。

Modified fiddle

希望這有助於！