javascript - 通过 Panzoom 变换放大时获取 Canvas 点击坐标

Question

我正在使用 Panzoom 在我有一些点的 Canvas 上缩放和平移。

这些点是可点击的，并且在未缩放 Canvas (通过 Panzoom)时效果很好。

未缩放时缩放系数为 1，缩放 200% 时为 2 等。

我制作了这个函数来计算平移时的坐标 - 这样您就可以平移并单击它，坐标将始终是相对的。这是缩放时它不起作用..

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};   
}

在这里尝试工作示例:http://jsfiddle.net/hugef0c7/

点击黄色方 block 得到点击的坐标。然后放大再点一下；现在坐标因缩放而不同。

有什么方法可以计算缩放时点击的坐标吗？

我已经尝试过将点击的点乘以/除以缩放因子，但这并没有太大帮助..

Answer 1

第一步是修正坐标的偏移，使它们相对于 Canvas 。您可以通过简单地将 Canvas 的绝对位置减去此函数中的客户端坐标来完成此操作:

$(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

希望这对您有所帮助!