Flutter 绘制番外：svg 文件与绘制（中）续

Android

2023-09-21 06:33:30

SVG 绘制进阶：掌握 Q、C 和 Z 指令

在上一篇文章中，我们探索了 SVG 文件中 H、V 和 L 指令的基础知识。今天，我们将深入研究 Q、C 和 Z 指令，它们在绘制更复杂的 SVG 图形中发挥着至关重要的作用。

Q 指令：二次贝塞尔曲线

Q 指令用于绘制二次贝塞尔曲线，由起点、控制点和目标点组成。想想一条弯曲的道路，它从起点出发，绕过控制点，然后到达目标点。

语法：

Q x1,y1, x,y

其中：

(x1, y1) 是控制点
(x, y) 是目标点

原理：

想象一下你驾驶汽车。从起点开始，你先向控制点转弯，然后继续向目标点行驶。你的车轮轨迹就会形成一条平滑的二次贝塞尔曲线。

C 指令：三次贝塞尔曲线

C 指令用于绘制三次贝塞尔曲线，比二次贝塞尔曲线更灵活。它由起点、两个控制点和目标点组成。

语法：

C x1,y1, x2,y2, x,y

其中：

(x1, y1) 和 (x2, y2) 是两个控制点
(x, y) 是目标点

原理：

三次贝塞尔曲线类似于驾驶汽车绕过两个弯道。从起点出发，你绕过第一个控制点，然后绕过第二个控制点，最后到达目标点。这会形成一条更加平滑和复杂的曲线。

Z 指令：闭合路径

Z 指令是一个简单的指令，用于闭合当前路径，将其与起点连接。

语法：

Z

原理：

Z 指令就像在你画画时收笔一样。它将路径的最后一个点与起点连接起来，形成一个封闭的形状。

代码示例

让我们用代码示例来说明 Q、C 和 Z 指令：

Path path = Path();
path.moveTo(startX, startY);
List<String> points = regexp.allMatches(data).map((m) => m.group(0)).toList();
for (int i = 0; i < points.length; i++) {
  if (points[i].startsWith('Q')) {
    List<double> coords = points[i].substring(1).split(',').map((e) => double.parse(e)).toList();
    path.quadraticBezierTo(coords[0], coords[1], coords[2], coords[3]);
  } else if (points[i].startsWith('C')) {
    List<double> coords = points[i].substring(1).split(',').map((e) => double.parse(e)).toList();
    path.cubicTo(coords[0], coords[1], coords[2], coords[3], coords[4], coords[5]);
  } else if (points[i].startsWith('Z')) {
    path.close();
  }
}

样例解析

考虑以下 SVG 代码：

<path d="M100,200 L150,250 Q200,300, 250,250 C300,200, 350,150, 400,200 Z" />

它了一个不规则的封闭形状。让我们逐步解析指令：

M100,200: 将起点设置为 (100, 200)。
L150,250: 绘制一条直线到 (150, 250)。
Q200,300, 250,250: 绘制一个二次贝塞尔曲线，控制点为 (200, 300)，目标点为 (250, 250)。
C300,200, 350,150, 400,200: 绘制一个三次贝塞尔曲线，第一个控制点为 (300, 200)，第二个控制点为 (350, 150)，目标点为 (400, 200)。
Z: 闭合路径，将其与起点连接。

结果图形如下所示：

[图片]