通过 Panzoom 的变换放大时获取画布点击坐标

【问题标题】：Get canvas click coordinates when zoomed in via transform by Panzoom通过 Panzoom 的变换放大时获取画布点击坐标
【发布时间】：2014-12-11 15:12:53
【问题描述】：

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

这些点是可点击的，并且在没有缩放画布（通过 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/

点击黄色方块获取点击坐标。然后放大并再次单击它；现在坐标因为缩放而不同了。

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

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

【问题讨论】：

标签： javascript jquery html canvas

【解决方案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

希望这会有所帮助！

【讨论】：