Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I move a point's y coordinate to intersect with a line?

enter image description here

I have point c, which represents the center of a circle. After I drag the circle, I want its y coordinate hmm to snap to a line that’s drawn between point a and b. How do I solve for hmm?

So far I’ve been able to find the midway y value between points a and b. However, it’s not taking into account point c‘s x value.:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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);

>Solution :

X coordinate of C depends on where you drag it, but Y coordinate should be so point stays on line between A and B?

The equation of line between 2 points (A and B):
(x - Xa) / (Xa - Xb) = (y - Ya) / (Ya - Yb).

So hmm = (x - Xa) * (Ya - Yb) / (Xa - Xb) + Ya.

Because it’s equation of line you can drag point C over A/B X coordinates and still find corresponsive Y value.

Hope I’ve understood your question right.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading