TNotes.svg

Appearance

to top

0011. 使用 path 绘制弧 ​

  • 涉及到的关键字：A
  • A 的参数有些多，可以结合 demos 来理解这些关键字的作用及含义。
  • 通过思考结尾的 Q&A 部分提到的一些问题，有助于加深对本节内容的理解。

1. 💻 demos.1 - 使用 <path> 绘制弧 ​

xml
<!--
A（Arc）这个命令用于绘制弧线。

弧线命令的参数格式为 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  rx 和 ry：这是弧的椭圆形半径，分别为水平半径和垂直半径。
  x-axis-rotation：弧所在椭圆的旋转角度，以度为单位。
  large-arc-flag：这个标志指定绘制大弧还是小弧。
    如果设为 1，则表示绘制大弧；
    如果设为 0，则表示绘制小弧；
  sweep-flag：这个标志控制弧的绘制方向。
    如果是 0，表示按逆时针方向绘制；
    如果是 1，表示按顺时针方向绘制；
  x 和 y：这是弧的终点坐标。

d="M30 50 A15 15 0 0 0 60 50"
表示从点 (30, 50) 开始，绘制一个半径为 15 的逆时针方向的小弧，结束于点 (60, 50)。

d="M30 50 A15 15 0 0 1 60 50"
表示从点 (30, 50) 开始，绘制一个半径为 15 的顺时针方向的小弧，结束于点 (60, 50)。
  -->
<svg style="margin: 3rem;" width="500px" height="500px" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M 30 50 A 15 15 0 0 1 60 50" fill="none" stroke="blue" stroke-width="1" />
  <path d="M 30 50 A 15 15 0 0 0 60 50" fill="none" stroke="orange" stroke-width="1" />

  <circle cx="30" cy="50" r="1" fill="red" />
  <circle cx="60" cy="50" r="1" fill="red" />
</svg>

2. 💻 demos.2 - 椭圆旋转 ​

xml
<!--
A rx ry x-axis-rotation large-arc-flag sweep-flag x y

d="M 30 50 A 15 30 45 1 1 60 50"
表示从点 (30, 50) 开始，绘制一个半径为 15 的水平半径和 30 的垂直半径，旋转 45 度的椭圆弧，选择 【顺时针】 方向的 【大弧】，结束于点 (60, 50)。

d="M 30 50 A 15 30 45 0 0 60 50"
表示从点 (30, 50) 开始，绘制一个半径为 15 的水平半径和 30 的垂直半径，旋转 45 度的椭圆弧，选择 【逆时针】 方向的 【小弧】，结束于点 (60, 50)。
-->
<svg style="margin: 3rem;" width="500px" height="500px" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- 未旋转的椭圆 - 用作参考 -->
  <path d="M 30 50 A 15 30 0 1 1 60 50" fill="none" stroke="gray" stroke-width=".5" />
  <path d="M 30 50 A 15 30 0 0 0 60 50" fill="none" stroke="gray" stroke-width=".5" />

  <!-- 旋转的椭圆 -->
  <path d="M 30 50 A 15 30 45 1 1 60 50" fill="none" stroke="blue" stroke-width="1" />
  <path d="M 30 50 A 15 30 45 0 0 60 50" fill="none" stroke="orange" stroke-width="1" />

  <circle cx="30" cy="50" r="1" fill="red" />
  <circle cx="60" cy="50" r="1" fill="red" />
</svg>

3. 💻 demos.3 - 两点决定 4 条弧 ​

xml
<svg style="margin: 3rem;" width="500px" height="500px" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- A rx ry x-axis-rotation large-arc-flag sweep-flag x y -->

  <path d="M 30 50 A 20 20 0 1 1 60 50" fill="none" stroke="red" stroke-width="1" />
  <!-- 从点 (30, 50) 开始，绘制一个半径均为 20 的圆弧，不旋转椭圆（旋转角度为 0 度），选择顺时针方向的大弧，结束于点 (60, 50)。 -->

  <path d="M 30 50 A 20 20 0 0 1 60 50" fill="none" stroke="green" stroke-width="1" />
  <!-- 从点 (30, 50) 开始，绘制一个半径均为 20 的圆弧，不旋转椭圆（旋转角度为 0 度），选择顺时针方向的小弧，结束于点 (60, 50)。 -->

  <path d="M 30 50 A 20 20 0 1 0 60 50" fill="none" stroke="blue" stroke-width="1" />
  <!-- 从点 (30, 50) 开始，绘制一个半径均为 20 的圆弧，不旋转椭圆（旋转角度为 0 度），选择逆时针方向的大弧，结束于点 (60, 50)。 -->

  <path d="M 30 50 A 20 20 0 0 0 60 50" fill="none" stroke="orange" stroke-width="1" />
  <!-- 从点 (30, 50) 开始，绘制一个半径均为 20 的圆弧，不旋转椭圆（旋转角度为 0 度），选择逆时针方向的小弧，结束于点 (60, 50)。 -->

  <circle cx="30" cy="50" r="1" fill="red" />
  <circle cx="60" cy="50" r="1" fill="red" />
</svg>

4. 🤔 指定一个起点坐标和一个终点坐标，一共可以绘制几条弧呢？ ​

  • 答：无数条。因为弧的半径可能会有无数种情况。

5. 🤔 如果起点和终点以及半径都保持不变的话，一共可以绘制几条弧呢？ ​

  • 答：通常是 4 条，特殊情况下是 2 条。
    • 小弧，顺时针：从起点到终点的最短路径，并且绕圆心顺时针画。
    • 小弧，逆时针：从起点到终点的最短路径，但是绕圆心逆时针画。
    • 大弧，顺时针：从起点到终点的较长路径，绕圆心顺时针画，超过180度。
    • 大弧，逆时针：从起点到终点的较长路径，绕圆心逆时针画，也超过180度。
  • 2 条的情况，见 demos.1
  • 4 条的情况，见 demos.3

6. 🤔 如果 rx ry 是相同的值，那么旋转还有意义吗？ ​

  • 答：没有～
    • 如果在绘制椭圆弧时使用的 rx（x轴半径）和 ry（y轴半径）是相同的值，那么椭圆实际上就变成了一个 正圆。
    • 在这种情况下，椭圆弧的旋转角度（通常表示椭圆的长轴与水平轴之间的角度）将不再有意义。
    • 因为圆的所有轴对称性完全一致，旋转圆并不改变其形状或圆弧的定位。
    • 因此，如果 rx 和 ry 相等，设置旋转角度对绘制的圆弧没有任何影响，圆的形状在任何角度下看起来都是一样的。
    • 在这种情况下，可以忽略旋转参数，只关注其他参数（如起点、终点、是否为大弧、以及绘制方向）。
  • 椭圆的旋转 - 见 demos.2