在 javascript 中协调数学

Question

我正在使用 Canvas 和 JS，我有一个简单的物理模拟，其中一个球被添加到 canvas 并对重力、碰撞和阻力做出反应。

目前可以通过拖动（像松紧带）来发射它。

function drawSlingshot() {
if (mouse.isDown) {
    ctx.beginPath();
    ctx.moveTo(ball.position.x, ball.position.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
    ctx.closePath();
}

}

这是我绘制一条指示球将去向的线的函数。不幸的是，它做的与预期相反。球应该沿着线而不是逆着线移动。

目前我获取球的X和Y位置以及球的X和Y 光标。如果要通过球镜像线，我正在寻找的点将是镜像线的 x,y。（见下图）

知道我该怎么做吗？

Answer 1

先计算光标和小球的差值

var difference_x = mouse.x - ball.position.x;
var difference_y = mouse.y - ball.position.y;

然后你在小球位置和小球位置之间画一条线减去差值：

ctx.lineTo(ball.position.x - difference_x, ball.position.y - difference_y);

在 javascript 中协调数学

Co-ordinate math in javascript

javascript

canvas

html5-canvas