javascript - 如何移动一个点的 y 坐标以与一条线相交？

Question

我有点 c，它代表一个圆的中心。拖动圆圈后，我希望它的 y 坐标 hmm 捕捉到在点 a 和 b 之间绘制的一条线。如何解决 hmm？

到目前为止，我已经能够找到点 a 和 b 之间的中间 y 值。但是，它没有考虑点 c 的 x 值。:

const snapYToLine = (aY, bY) => {
  const yDist = bY - aY;
  return aY + (yDist * 0.5);
}

const a = { x: 10, y: 10 };
const b = { x: 50, y: 30 };
const c = { x: 20, y: 0 }; // not doing anything with this yet...

const hmm = snapYToLine(a.y, b.y); // will need to include c.x here...
console.log(hmm);

Answer 1

C 的

X 坐标取决于您拖动它的位置，但是 Y 坐标应该保持在 A 之间的直线上 和 B?

两点(A 和 B)之间的直线方程:(x - Xa)/(Xa - Xb) = (y - Ya)/(Ya - Yb)。

所以 hmm = (x - Xa) * (Ya - Yb)/(Xa - Xb) + Ya。

因为它是直线方程，所以你可以将点 C 拖到 A/B X 坐标上，仍然可以找到相应的 Y 值。

希望我没听错你的问题。