平面几何：三点确定唯一圆弧

大家好，我是前端西瓜哥。

之前我们实现了三点求圆的算法，这次我们加一点强度，实现 三点求圆弧 算法。

示例演示

codesandbox.io/p/sandbox/w...

实现思路

圆弧的话，有 3 种表达。

已知圆弧的起点（p1）和终点（p3）了，所以我选择用第二种表达方式：起点、终点、半径、优弧、方向。

我们需要求得以下参数：

start：起点位置；
end：终点位置；
radius：半径；
largeArc：是否为优弧（更长的那条弧）；
sweep：是否是正方形（顺时针）。

起点和终点我们规定点 p1 和 p3。

首先是求圆心和半径，这个我们之前已经实现过了，调用 getCircleWith3Pt 方法，拿到圆心和半径。

判断是否为优弧

然后判断我们要求的圆弧是否为优弧（更长的那一段弧）。

判断方法为 p2 和圆心是否在 p1p3 连成向量的同一方向上，说到方向，很容易就想到叉积。

如果 p1p3 分别和 p1-center、p1p2 的叉积的值的正负相同，说明是优弧。

ini 复制代码

const largeArc = crossProduct(p1, p3, center) * crossProduct(p1, p3, p2) > 0;

/** p1p2 和 p1p3 的叉积 */
const crossProduct = (p1: Point, p2: Point, p3: Point) => {
  const vec1 = { x: p2.x - p1.x, y: p2.y - p1.y };
  const vec2 = { x: p3.x - p1.x, y: p3.y - p1.y };
  return vec1.x * vec2.y - vec1.y * vec2.x;
};

不用考虑叉积为 0 的场景，因为 3 个点不可能在一条线上，这样是无法构成圆的。

判断顺逆时针

我们假设 p1 到 p3 的弧是顺时针的，那么此时 p2 应该位于 p1 和 p3 之间。如果不在，说明是逆时针。

这里我们需要一个判断从向量 A 到向量 B 顺时针扫过角度的方法，这个我之前的文章讲过。不过那个算法给定的范围是 -180 度到 180 度，这里我需要调整到 0 到 360 度。

实现如下。

ini 复制代码

/** 向量 a 到 b 的扫过的顺时针角度 */
const getSweepAngle = (a: Point, b: Point, anticlockwise?: boolean) => {
// 点乘求夹角
const dot = a.x * b.x + a.y * b.y;
const d = Math.sqrt(a.x * a.x + a.y * a.y) * Math.sqrt(b.x * b.x + b.y * b.y);
let cosTheta = dot / d;
if (cosTheta > 1) {
    cosTheta = 1;
  } elseif (cosTheta < -1) {
    cosTheta = -1;
  }

let theta = Math.acos(cosTheta);
const cross = a.x * b.y - a.y * b.x;
const reverse = anticlockwise ? cross > 0 : cross < 0;
if (reverse) {
    theta = Math.PI * 2 - theta;
  }

return theta;
};

则该圆弧的顺逆时针为：

scss 复制代码

// p2 是否在 p1 和 p3 的顺时针方向形成的圆弧上
const sweep = getSweepAngle(vec1, vec2) < getSweepAngle(vec1, vec3);

至此，圆弧计算完毕。

完整代码

ini 复制代码

interface Point {
  x: number;
  y: number;
}

interface Arc {
  start: Point; // 起点
  end: Point; // 终点
  radius: number; // 半径
  largeArc: boolean; // 是否大弧
  sweep: boolean; // 是否顺时针
}

/** 通过三点确定一个圆弧 */
exportconst getArcWith3Pt = (p1: Point, p2: Point, p3: Point): Arc | null => {
const circle = getCircleWith3Pt(p1, p2, p3);
if (!circle) returnnull;
const { center, radius } = circle;

// p2 和 center 是否在 p1->p3 向量的同一侧
const largeArc = crossProduct(p1, p3, center) * crossProduct(p1, p3, p2) > 0;

const vec1 = { x: p1.x - center.x, y: p1.y - center.y };
const vec2 = { x: p2.x - center.x, y: p2.y - center.y };
const vec3 = { x: p3.x - center.x, y: p3.y - center.y };
// p2 是否在 p1 和 p3 的顺时针方向形成的圆弧上
const sweep = getSweepAngle(vec1, vec2) < getSweepAngle(vec1, vec3);

return { start: p1, end: p3, radius, largeArc, sweep };
};

/** p1p2 和 p1p3 的叉积 */
const crossProduct = (p1: Point, p2: Point, p3: Point) => {
const vec1 = { x: p2.x - p1.x, y: p2.y - p1.y };
const vec2 = { x: p3.x - p1.x, y: p3.y - p1.y };
return vec1.x * vec2.y - vec1.y * vec2.x;
};

/** 向量 a 到 b 的扫过的顺时针角度 */
const getSweepAngle = (a: Point, b: Point, anticlockwise?: boolean) => {
// 点乘求夹角
const dot = a.x * b.x + a.y * b.y;
const d = Math.sqrt(a.x * a.x + a.y * a.y) * Math.sqrt(b.x * b.x + b.y * b.y);
let cosTheta = dot / d;
if (cosTheta > 1) {
    cosTheta = 1;
  } elseif (cosTheta < -1) {
    cosTheta = -1;
  }

let theta = Math.acos(cosTheta);
const cross = a.x * b.y - a.y * b.x;
const reverse = anticlockwise ? cross > 0 : cross < 0;
if (reverse) {
    theta = Math.PI * 2 - theta;
  }

return theta;
};

结尾

我是前端西瓜哥，关注我，学习更多平面几何知识。