5

我有一个带有精灵的玩家类，我想让它面向我的鼠标指针。

我正在使用它来计算精灵的旋转应该是什么：

this.rotation = -(Math.atan2(this.x - mouseState.x, this.y - mouseState.y) * 180 / Math.PI);

然后在我Player班级的 draw 方法中，我正在这样做：

Player.prototype.draw = function() {
    window.ctx.save();
    window.ctx.translate(this.x + this.sprite.width / 2, this.y + this.sprite/height / 2);
    window.ctx.rotate(this.rotation);
    window.ctx.drawImage(this.sprite, this.x, this.y);
    window.ctx.restore();
}

它做了一些事情，但不是我想要的。精灵似乎在画布的左上角（x:0, y:0）周围疯狂地移动。

如何使精灵面向鼠标光标，同时使用其中心点作为原点？

4

2 回答 2

2

你没有翻译回来。请注意我在下面添加的额外window.ctx.translate调用，并注意我如何为 x 和 y 值添加负数。

Player.prototype.draw = function() {
    window.ctx.save();
    window.ctx.translate(this.x + this.sprite.width / 2, this.y + this.sprite/height / 2);
    window.ctx.rotate(this.rotation);
    window.ctx.translate(-this.x + this.sprite.width / 2, -this.y + this.sprite/height / 2);
    window.ctx.drawImage(this.sprite, this.x, this.y);
    window.ctx.restore();
}

基本上，这样做是将画布上下文中心移动（平移）到您的对象中心，旋转（旋转），然后您需要将中心点从您那里移回。

于 2013-02-19T02:52:05.323 回答
0

Math.atan2(y,x)

请注意，y参数首先出现，然后是x. 交换你的论点。

此外，它返回一个以弧度表示的值，如果您尝试调用Math.atan2(1,0). 删除度数的转换。

这是以弧度为单位的顺时针旋转

意思是，你不希望你的 rad-deg 转换。

this.rotation = Math.atan2(this.y-mouseState.y, this.x-mouseState.x);

window.ctx.rotate(this.rotation);
于 2013-02-19T00:35:16.697 回答