你知道吗？圆弧有3种表达方式

前端西瓜哥

发布于 2024-06-03 15:26:35

740

发布于 2024-06-03 15:26:35

文章被收录于专栏：前端西瓜哥的前端文章前端西瓜哥的前端文章

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

圆弧是一条平面曲线，它是圆上两点间的一段，包含两个端点。

在做图形渲染的时候，我们需要设计好对应的数据结构，目前观测的常见的有三种表达。

这篇文章会对它们一一讲解分析。

圆心、半径、起始角、结束角、方向

使用到的参数：

center: 圆心；
radius：半径；
starAngle：起始角；
endAngle：结束角；
sweep：是否为正方向（起点到终点走顺逆时针）。该参数可以去掉，因为可以通过交换 startAngle 和 endAngle 来做等价。

圆弧可以视作一个只绘制了部分线段的圆。

所以我们在原来圆形的圆心、半径参数的基础上，加上极坐标弧度表示的起点和终点，就能表达一段圆弧。

特别注意的是，我们需要提前定义好 图形所在画布的极坐标：

angleStart：角度为 0 时对应哪个方向，通常为向右方向；
angleDir：极坐标的正方向。true 为顺时针，false 为逆时针。

Canvas 2D 使用了这种表达方式：

const center = { x: 150, y: 150 };
const radius = 100;
const startAngle = 0;
const endAngle = Math.PI * 2 * (5 / 7);

ctx.arc(center.x, center.y, radius, startAngle, endAngle);

绘制结果为：

起点、终点、半径、优弧、方向

用到的参数：

start：起点位置；
end：终点位置；
radius：半径；
largeArc：是否使用优弧（更长的那条弧）；
sweep：正方向是顺逆方向，是否朝则正方向移动（起点到终点）。同样，这个 sweep 也是可要可不要，交换 start 和 end 也能表达。

已知起点、终点、半径，我们可以确定圆弧落在这两个圆的路径上。

起点和终点把圆分成两部分，接着我们需要看看是大弧还是小弧，确定走哪一部分。

最后是方向，起点到终点，应该走正方向（假设为顺时针方向）还是反方向。

至此，圆弧就确定好了。

SVG 的 Path 使用了这种表达方式。

const start = { x: 100, y: 100 };
const end = { x: 250, y: 200 };
const radius = 95;
const sweep = true;
const largeArc = true;

const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${
  largeArc ? 1 : 0
} ${sweep ? 1 : 0} ${end.x} ${end.y}`;

顺带一提，Path 还能表达椭圆弧。

渲染效果：

表达 2 这种方式没有圆心参数，但圆心位置还是要经常要用到的，比如渲染的时候还是要算出来，作为矩阵的参数的一部分。

求圆心的代码实现为：

const getArc2Center = (
  start: Point,
  end: Point,
  radius: number,
  sweep: boolean,
  largeArc: boolean,
) => {
  const dist = distance(start, end);
  // 半径太小，无法构成圆。
  // 做特殊处理，radius 替换为 start 到 end 的距离除以 2
  // 此时圆心就是两点的中点
  if (radius * 2 < dist) {
    return {
      x: start.x / 2 + end.x / 2,
      y: start.y / 2 + end.y / 2,
    };
  }
  const cos = Math.min(dist / 2 / radius, 1);
  const dAngle = Math.acos(cos);
  const startToEndAngle = Math.atan((end.y - start.y) / (end.x - start.x));

  let angle = 0;
  if (sweep === largeArc) {
    angle = startToEndAngle - dAngle;
  } else {
    angle = startToEndAngle + dAngle;
  }

  return {
    x: start.x + radius * Math.cos(angle),
    y: start.y + radius * Math.sin(angle),
  };
};

原理是通过三角函数求起点到圆心对应的角，然后基于这个角度、起点位置、半径求出圆心位置。

起点、终点、凸度

使用到的参数：

start：起点位置；
end：结尾位置；
bulge：凸度，线条的凸出程度，对应 圆弧扫过的圆心角的 1/4 的正弦值。

bulge 的符号表示方向，正数表示逆时针，负数表示顺时针。

我们知道，tan(45°) 的值为 1，所以当圆心角为 180度，它的 1/4 就是 45度，正弦值就是 1，即 180 度对应的凸度为 1。

然后正弦函数在 (-PI/2, PI/2) 区间是单调递增的，所以我们有：

凸度的绝对值小于 1 时，圆弧为劣弧；绝对值大于 1 时，圆弧为优弧；特别的，凸度为 0 时，表示的是直线。

接着我们求圆弧的半径 radius。

根据凸度，我们通过反正弦求出圆心角 delta，然后我们作出下图。

半径 radius 的值为起点到终点距的一半，除以圆心角的一半： (dist<start, end>/2) / sin(delta/2)。

至此，我们把这种表达方式转换为了第二种表达方式，圆弧就表达出来了。

const start = { x: 100, y: 100 };
const end = { x: 250, y: 200 };
const bulge: number = -1.6;

if (bulge === 0) {
  console.log('表达的是直线');
  return;
}

const sweep = bulge > 0 ? false : true;
const largeArc = Math.abs(bulge) > 1 ? true : false;
const sweepAngle = Math.atan(Math.abs(bulge)) * 4;
const radius = distance(start, end) / 2 / Math.sin(sweepAngle / 2);

渲染结果为：