Question

我制作了一个小玩具，可以让我的鼠标角度相对于画布上的中心点。我试图做到这一点，所以我可以点击移动这一点，并想出了这个：

我已经想出如何做到这一点，所以我可以改变中心点，而不会让事情变得怪异，但是通过了，我不知道该怎么做。不过，我知道这是怎么回事。这是因为它正在检查坐标网格的原始位置与新坐标网格之间的关系，但在我移动之后，我使用的数字不再有效。

我需要一种方法来在使用ctx.translate()后获取坐标网格的位置，但我不确定这是否可行。

Answer 1

为什么不移动“玩具物品”的中心点，而不是移动整个画布？

所以而不是

//move the location of the coordinate grid on click
canvas.addEventListener('click', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    gridOffsetX = mousePos.x - 250;
    gridOffsetY = mousePos.y - 250;
    ctx.translate(gridOffsetX, gridOffsetY);
}, false);

var centerPoint = {x: 250, y:250}
//move the location of the coordinate grid on click
canvas.addEventListener('click', function (evt) {
    centerPoint = getMousePos(canvas, evt);
}, false);

演示： http://jsfiddle.net/7264eahd/

Javascript / Canvas - 找到相对于坐标网格位置的鼠标坐标

1 个答案: