让canvas上的小球慢慢向鼠标移动

Question

我想让一个球慢慢地向我的鼠标移动。

我正在使用 paper.js，这是一个简单的动画库。使用这个我有一个球在屏幕上移动。这些是球的一些属性：

balls[0].vector.angle 是它的方向。 0 = 右，90 = 下，180 = 左等以及介于两者之间的所有内容

balls[0].point.x 是它的 x 位置，.y 是 y 位置。

balls[0].vector.length 是它的速度。

我加入了一个鼠标移动事件，我想我得到了它们之间的角度如下：

    canvas.addEventListener("mousemove", function(e){

    var a = balls[0].point.y - e.clientY;
    var b = balls[0].point.x - e.clientX;
    var angleDeg = Math.atan2(a, b) * 180 / Math.PI;
});

所以我让球静止不动来测试它并在它周围移动我的鼠标。球的左边给我 0 度。上方为 90。右侧为 180。球下方为 -90，等等。

然后我计算了同一事件中的距离，并改变了速度以反映距离，给它一个上限作为最大速度：

var distance = Math.sqrt( a*a + b*b );

var maxSpeed = 20; 
balls[0].vector.length = (distance/30 > maxSpeed) ? maxSpeed : distance/30;

所以我测试了速度和这个，它运行完美。当我给球一个早先的角度时，它会朝各种方向移动。速度还是可以的，只是球跑错了方向，我不知道我做错了什么。

Answer 1

坦率地说，您不需要三角函数。你所需要的只是古老的毕达哥拉斯定理。

var MAX_SPEED = 20;
var MIN_SPEED = 0.25; // Very slow if close but not frozen.
var ATTRACTION = 0.5; 
var diff_y = e.clientY - balls[0].point.y;
var diff_x = e.clientX - balls[0].point.x;
var distance = Math.sqrt(diff_x * diff_x + diff_y * diff_y)
var speed = distance * ATTRACTION;
if (speed > MAX_SPEED) speed = MAX_SPEED;
if (speed < MIN_SPEED) speed = MIN_SPEED;
// The rates along axes are proportional to speed;
// we use ratios instead of sine / cosine.
balls[0].point.x += (diff_x / distance) * speed;
balls[0].point.y += (diff_y / distance) * speed;

引入力和惯性可以带来更多乐趣。

Answer 2

根据增量指定方向

var deltaX = e.clientX - balls[0].point.x;
var deltaY = e.clientY - balls[0].point.y;
var distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
var maxSpeed = 20; 
balls[0].vector.length = (distance/30 > maxSpeed ) ? maxSpeed  : distance / 30;
balls[0].point.x = balls[0].point.x + (balls[0].vector.length * deltaX / distance);
balls[0].point.y = balls[0].point.y + (balls[0].vector.length * deltaY / distance);

我认为这行得通

让canvas上的小球慢慢向鼠标移动

Make a ball on a canvas slowly move towards the mouse

javascript

html5-canvas

paperjs