Как мне повернуть точку вокруг мыши в PaperJS?

Question

Как мне повернуть точку вокруг мыши в PaperJS?

1

Я создаю простую игру с использованием PaperJS, и я сейчас застрял на ее небольшой части.

В игре есть игрок (только круг), у которого две руки (два меньших круга)

Я хочу, чтобы руки всегда указывали на позицию мыши, но я не могу понять уравнение, необходимое для этого.

Вот некоторые из кода, которые у меня есть до сих пор, мне просто нужна помощь, заполняющая пробел...

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

    var rotation = ???

    playerHands.rotate(rotation, view.center)    
}

Вот схема того, что я пытаюсь выполнить:

Evan Wild 14 фев. 2018, в 02:25

Источник

0

Я не знаком с paper.js , но недавно я ответил на этот вопрос относительно вращения мыши. Может быть, это будет полезно. Я полагаю, вы должны написать что-то вроде этого: var rotation = Math.atan2(mouseY - view.center.y, mouseX - view.center.x) * 180 / Math.PI
Kirill Simonov 14 фев. 2018, в 01:33
0

да atan2 - это ответ ... чтобы получить правильное уравнение, как бы нам ни понадобилось знать вашу систему координат (где x, y указывает и в каком направлении увеличивается угол), в противном случае вам придется играть с комбинациями +/- ... положение игрока (вместо центра обзора ... если они не совпадают) и положение мыши для этого в качестве ввода .... также вам нужно знать, находится ли угол в [deg] или [rad] и где его ноль
Spektre 14 фев. 2018, в 08:31

Теги:

javascript

math

rotation

paperjs

1 ответ

Ещё вопросы

Я не знаком с paper.js , но недавно я ответил на этот вопрос относительно вращения мыши. Может быть, это будет полезно. Я полагаю, вы должны написать что-то вроде этого: var rotation = Math.atan2(mouseY - view.center.y, mouseX - view.center.x) * 180 / Math.PI
да atan2 - это ответ ... чтобы получить правильное уравнение, как бы нам ни понадобилось знать вашу систему координат (где x, y указывает и в каком направлении увеличивается угол), в противном случае вам придется играть с комбинациями +/- ... положение игрока (вместо центра обзора ... если они не совпадают) и положение мыши для этого в качестве ввода .... также вам нужно знать, находится ли угол в [deg] или [rad] и где его ноль

Stefan Krüger · Answer 1 · 2018-03-02T08-50-00.000Z

действительно просто:

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

идея здесь заключается в том, что вы можете использовать две точки для векторной геометрии. более подробные описания приведены в учебнике по векторной геометрии

есть +90 смещение, необходимое для выравнивания мыши с вершиной игрока, так как paperjs видит ось x как 0 ° для вращения.

Я создал рабочий пример в sketch.paperjs.org

вышеперечисленное player.rotation работает только в том случае, если в Group Player есть значение .applyMatrix false. Кроме того, я устанавливаю точку pivot группы игроков в центр большого круга при создании:

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