时间戳

首页 > 解决方案 > 使用 2 个点和圆弧半径计算路径圆弧上的中点

javascript - 使用 2 个点和圆弧半径计算路径圆弧上的中点

问题描述

求从 A 到 B 的路径弧的中点 M：

图表：

在此处输入图像描述

我有 ：

  1. 点 A(x,y)
  2. 点 B(x,y)
  3. 圆弧半径

我尝试了以下代码，但不推荐使用getPointAtLength。

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

标签： javascriptmathsvggeometrycomputational-geometry

解决方案

几何计算：

计算向量

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

是长度

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

归一化向量

uAB = AB / lAB

和弦中点

mAB = (A + B)/2

箭头值

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

现在弧的中间：

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

请注意，有两个点（您需要知道与 AB 相关的圆心方向），对于第二个，第二个项的变化符号

推荐阅读