获取画布点击坐标时，通过变换放大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

希望这有助于！