如何在 PaperJS 中围绕鼠标点旋转？答案

【问题标题】：How do I rotate around a point towards the mouse in PaperJS?如何在 PaperJS 中围绕鼠标点旋转？
【发布时间】：2018-02-14 00:28:13
【问题描述】：

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

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

我希望双手始终指向鼠标位置，但我不知道这样做所需的等式。

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

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

    var rotation = ???

    playerHands.rotate(rotation, view.center)    
}

这是我想要完成的图表：

【问题讨论】：

我不熟悉paper.js，但最近我回答了this question关于向鼠标旋转的问题。也许会有所帮助。我想你应该这样写：var rotation = Math.atan2(mouseY - view.center.y, mouseX - view.center.x) * 180 / Math.PI
是的 atan2 是答案...要获得正确的方程式，我们需要如何知道您的坐标系（x，y 点和角度增加的方向），否则您需要玩使用+/- 组合...您需要玩家位置（而不是视图中心...如果它们不相同）和鼠标位置作为输入...您还需要知道角度是否在[deg]或[rad]，它的零在哪里

标签： javascript math rotation paperjs

【解决方案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 仅在播放器Group 将其.applyMatrix 设置为false 时才有效。另外我在创建时将 Player-Group pivot 指向大圆中心：

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

【讨论】：