通过Panzoom变换放大时，获取画布单击坐标

Get canvas click coordinates when zoomed in via transform by Panzoom

本文关键字：布单击 单击 坐标 获取 变换 Panzoom 放大 通过      更新时间：2023-09-26

我使用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/

单击黄色正方形以获得单击的坐标。然后放大并再次单击它；现在由于缩放，坐标不同了。

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

我试过用缩放因子乘以/除以点击点，但这没有多大帮助。。

第一步是校正坐标的偏移量，使其相对于画布。您可以通过简单地将画布的绝对位置减去该函数中的客户端坐标来实现这一点：

$(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])
    };
}

这应该能胜任工作。

改良小提琴

希望这能有所帮助！

相关文章：