Question

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

这些点是可点击的，当没有缩放画布时（通过Panzoom）它可以正常工作。

未校正时缩放系数为1，缩放因子为200％变焦等。

我已经使用此功能来计算平移时的坐标 - 所以你可以平移并点击它，坐标将始终是相对的。这是在缩放它不起作用时..

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/

单击黄色方块以获取单击的坐标。然后放大并再次单击它;现在由于缩放，坐标不同。

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

我尝试过将点击的点与缩放系数相乘或分开，但这没什么用。

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和{{1索引术语中的0或3）：

那应该做的。

<强> Modified fiddle

希望这有帮助！

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

1 个答案: