Flutter绘制之 – 玩转路径联合

我正在参加「启航计划」。

前言

在Flutter制作中，path途径可谓是制作中的中心，理论上，经过path途径可以制作出恣意的二维图形，把握path途径的制作，就相当于把握了制作的中心，今天介绍一个途径制作中的基本常用操作，途径联合，将两个path途径经过特定的办法合成为一个新的path途径。

办法

途径联合的中心办法为Path类里的一个静态combine()办法，如下：

// 经过path1和path2途径的到新的途径p
Path path = Path.combine(PathOperation operation, Path path1, Path path2);

办法体有三个入参，别离为联合办法、path1、path2 ,经过联合办法将path1和path2进行联合返回一个新path，详细的联合办法都有哪些呢，那就看下PathOperation这个类。

点进源码发现PathOperation是一个枚举类型，一共有5个类型，也就是有5种联合办法。如下：

enum PathOperation {
  /// 得到path1独自区域 也可理解为path1-path2差集
  difference,
  /// 得到path2独自区域 同理
  reverseDifference,
  /// 得到 path1&path2的交集区域
  intersect,
  /// 得到 path1&path2的补集区域
  xor,
  /// 得到 path1&path2的并集区域
  union,
}

假如path1和path2途径有重合的部分，经过以上办法别离可以得到不同的新path。

为了直观表现,咱们制作以下两个path途径的圆形，它们之间有重合部分，也有独立的部分。
两个圆环堆叠在一起，那么这时候咱们就可以经过上面的五种途径联合办法获取到这两个个圆环中的恣意交叉的图。

注：经过联合得到的path途径都是一个闭合途径，原始途径假如对错闭合途径，会默认闭合，再进行联合。

上面xor的联合办法再画笔为线条时看不出差异，将画笔设为填充，就发现其实尽管看起来相同，可是途径现已产生改动。

总结下5种联合办法：2个取独自自己的，2个别离取相同的部分和不同的部分，1个我全都要。

其实经过这5种联合功能，咱们就可以轻松的制作出一些比较复杂的图形，比如下面的比如：

太极

太极图正常可以用贝塞尔曲线或弧线制作，可是经过途径联合办法就会变得非常简略，只需要制作圆和矩形就行了。
首要咱们制作一个黑色圆，

中心代码：

// 大圆直径
 double r = 200;
 Path pathA = Path();
 pathA.addOval(Rect.fromCenter(center: Offset.zero, width: r, height: r));
// 黑白小圆
 Path pathB = Path();
 pathB.addOval(Rect.fromCenter(center: Offset(0, r / 4), width: r / 2, height: r / 2));
 Path pathC = Path();
 pathC.addOval(Rect.fromCenter(center: Offset(0, -r / 4), width: r / 2, height: r / 2));
 // 辅佐途径
 Path pathD = Path();
 pathD.addRect(Rect.fromCenter(center: Offset(r / 4, 0), width: r / 2, height: r));
 canvas.drawPath(pathA, paint
       ..color = Colors.black
       ..style = PaintingStyle.fill);
 canvas.drawPath(Path.combine(PathOperation.intersect, pathA, pathD), paint..color = Colors.white);
 canvas.drawPath(pathC, paint..color = Colors.white);
 canvas.drawPath(pathB, paint..color = Colors.black);
 // 太极眼
 canvas.drawOval(
     Rect.fromCenter(center: Offset(0, r / 4), width: r / 20, height: r / 20), paint..color = Colors.white);
 canvas.drawOval(
     Rect.fromCenter(center: Offset(0, -r / 4), width: r / 20, height: r / 20), paint..color = Colors.black);

天狗食月

还可以运用途径联合合作动画实现月圆月缺变化情况，布景运用随机数生成随机坐标制作一些星星，多角形的制作有爱好可以看下之前这篇文章 Flutter实现一个多边形or多角星组件。

将圆形进行位移重合，达到天狗食月的效果，代码就不贴了。

总结

途径联合一共有5种办法，尽管只要5种，可是这5种办法其实现已涵盖了两个图形的恣意可能会出现的区域，熟练把握途径联合办法，对于一些复杂的图形咱们就可以经过联合办法巧妙的生成，希望对正在阅读的你在Flutter制作中有所帮助 ～