Question

enter image description here

背景：我有一个HTML5画布，我画了一个图像。现在，当图像首次加载时，它以100％的比例加载。图像是5000 x 5000.画布大小是600 x 600.所以onload，我只看到前600 x像素和600 y像素。我可以选择在画布上缩放和翻译图像。

我的问题：我正在尝试找出一种算法，该算法在考虑缩放和平移的同时，相对于图像返回鼠标点击的像素坐标，而不是画布。我知道已经有很多话题，但我见过的都没有用。我的问题是当我有多个翻译和缩放时。我可以缩放一次并获得正确的坐标，然后我可以再缩放并获得正确的坐标，但是一旦我缩放或缩放多次，坐标就会关闭。

这是我到目前为止所拥有的。

//get pixel coordinates from canvas mousePos.x, mousePos.y
(mousePos.x - x_translation)/scale //same for mousePos.y

annotationCanvas.addEventListener('mouseup',function(evt){
                     dragStart = null;
                     if (!dragged) {
                       var mousePos = getMousePos(canvas, evt);
                       var message1 =  " mouse  x: " + (mousePos.x) + '  ' + "mouse y: " + (mousePos.y);
                       var message =  "  x: " + ((mousePos.x + accX)/currentZoom*currentZoom) + '  ' + "y: " + ((mousePos.y + accY)/currentZoom);
                       console.log(message);
                       console.log(message1);
                       console.log("zoomAcc = " + zoomAcc);
                       console.log("currentZoom = " + currentZoom);
                       ctx.fillStyle="#FF0000";
                       ctx.fillRect((mousePos.x + accX)/currentZoom, (mousePos.y + accY)/currentZoom, -5, -5);

                     }
             },true);
//accX and accY are the cumulative shift for x and y respectively, and xShift and xShift yShift are the incremental shifts of x and y respectively

当前缩放是累积缩放。和zoomAcc是此时缩放的单次迭代。所以在这种情况下，当我放大时，zoomAcc总是1.1，而currentZoom = currentZoom * zoomAcc。

为什么这是错的？如果有人能告诉我如何跟踪这些转换然后将它们应用到mousePos.x和mousePos.y我将不胜感激。

感谢

更新：

在图像中，绿点是我点击的地方，红点是我使用markE的方法计算该点的计算的地方。 m值是markE方法中的矩阵值。

Answer 1

当您命令上下文进行翻译和缩放时，这些称为画布转换。

Canvas转换基于一个可由6个数组元素表示的矩阵：

// an array representing the canvas affine transformation matrix 
var matrix=[1,0,0,1,0,0];

如果你执行context.translate或context.scale并同时更新矩阵，那么你可以使用矩阵将未转换的X / Y坐标（如鼠标事件）转换为变换后的图像坐标。

<强> context.translate：

您可以同时执行context.translate（x，y）并在矩阵中跟踪该转换，如下所示：

// do the translate
// but also save the translate in the matrix
function translate(x,y){
    matrix[4] += matrix[0] * x + matrix[2] * y;
    matrix[5] += matrix[1] * x + matrix[3] * y;
    ctx.translate(x,y);
}

<强> context.scale：

您可以同时执行context.scale（x，y）并跟踪缩放矩阵，如下所示：

// do the scale
// but also save the scale in the matrix
function scale(x,y){
    matrix[0] *= x;
    matrix[1] *= x;
    matrix[2] *= y;
    matrix[3] *= y;    
    ctx.scale(x,y);
}

将鼠标坐标转换为变换后的图像坐标

问题是浏览器不知道您已经转换了画布坐标系，浏览器将返回相对于浏览器窗口的鼠标坐标 - 而不是相对于转换后的画布。

幸运的是，转换矩阵一直在跟踪所有累积的翻译和缩放。

您可以将浏览器的窗口坐标转换为变换后的坐标，如下所示：

// convert mouseX/mouseY coordinates
// into transformed coordinates

function getXY(mouseX,mouseY){
    newX = mouseX * matrix[0] + mouseY * matrix[2] + matrix[4];
    newY = mouseX * matrix[1] + mouseY * matrix[3] + matrix[5];
    return({x:newX,y:newY});
}

HTML5画布在缩放和翻译后获取坐标

1 个答案: