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

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

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

示例演示

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

结尾

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


相关阅读,

平面几何:判断点是否在多边形内(射线法)

平面几何算法:求点到直线和圆的最近点

相关推荐
前端(从入门到入土)12 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗38 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端