如何在PaperJS中围绕鼠标旋转点?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在PaperJS中围绕鼠标旋转点?相关的知识,希望对你有一定的参考价值。
我正在使用PaperJS创建一个简单的游戏,我目前只停留在它的一小部分。
在游戏中,有一个玩家(只是一个圆圈)有两只手(两个小圆圈)
我希望手总是指向鼠标位置,但我无法弄清楚这样做的方程式。
这是我到目前为止的一些代码,我只需要帮助填补空白...
view.onMouseMove = function(event) {
var mouseX = event.point.x;
var mouseY = event.point.y;
var rotation = ???
playerHands.rotate(rotation, view.center)
}
这是我想要完成的图表:
答案
很简单:
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;
以上是关于如何在PaperJS中围绕鼠标旋转点?的主要内容,如果未能解决你的问题,请参考以下文章