calculate midpoint on path arc using 2 points and radius of arc

1
votes

find midpoint M of an path arc from A to B:

diagram:

enter image description here

i have :

  1. point A(x,y)
  2. point B(x,y)
  3. radius of the arc

i tried following code but getPointAtLength is deprecated.

var myarc = document.getElementById("myarc");

// Get the length of the path
var pathLen = myarc.getTotalLength();
console.log(pathLen);
// How far along the path to we want the position?
var pathDistance = pathLen * 0.5;
console.log(pathDistance);
// Get the X,Y position
var midpoint = myarc.getPointAtLength(pathDistance)
console.log(myarc.getAttribute("d"));
console.log(midpoint);
1
javascriptmathsvggeometrycomputational-geometry
developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/… - user11931243
It just moved to the base class. I've edited the documentation to remove the deprecation warning. - Robert Longson
yes the post is changed now. thank you so much - user11931243

1 Answers

1
votes

Geometric calculation:

Сalculalate vector

AB = B - A   (AB.x = B.x - A.x, similar for Y)

It's length

lAB = sqrt(AB.x*AB.x + AB.y*AB.y)

Normalized vector

uAB = AB / lAB

Middle point of chord

mAB = (A + B)/2

Arrow value

F = R - sqrt(R*R - lAB*lAB/4)

Now middle of arc:

M.x = mAB.x - uAB.Y * F
M.y = mAB.y + uAB.X * F

Note that there are two points (you need to know circle center orientation relatice to AB), for the second one change signs of the second terms