javascript - 如何在 PaperJS 中围绕一个点向鼠标旋转？

Question

我正在使用 PaperJS 创建一个简单的游戏，目前我只停留在其中的一小部分。

在游戏中，有一个玩家(只是一个圆圈)有两只手(两个较小的圆圈)

我希望指针始终指向鼠标位置，但我想不出这样做所需的方程式。

这是我到目前为止的一些代码，我只需要帮助填充空白...

view.onMouseMove = function(event) {
    var mouseX = event.point.x;
    var mouseY = event.point.y;

    var rotation = ???

    playerHands.rotate(rotation, view.center)    
}

这是我要完成的工作的图表:

Answer 1

非常简单:

function onMouseMove(event) {
    let delta = (event.point - player.position);
    player.rotation = delta.angle+90;
}

这里的想法是你可以使用两个 Points做矢量几何。更深入的描述在 Vector-Geometry Tutorial 中

需要一个 +90 偏移来将鼠标与播放器顶部对齐，因为 paperjs 将 x 轴视为 0° 进行旋转。

我已经创建了一个工作 example in sketch.paperjs.org

上面的 player.rotation 仅在 Player Group 的 .applyMatrix 设置为 false 时有效.另外，我在创建时将 Player-Group pivot 点设置为大圆心:

let player = new Group(circle, handleleft, handleright);
player.applyMatrix = false;
player.pivot = circle.bounds.center;
player.position = position;