Flutter繪制之路徑聯(lián)合詳解

更新時間：2023年06月21日 17:14:19 作者：老李code

在Flutter繪制中，path路徑可謂是繪制中的核心，通過path路徑可以繪制出任意的二維圖形，所以本文就來和大家聊聊Flutter中路徑聯(lián)合的相關知識，感興趣的可以了解一下

前言

在Flutter繪制中，path路徑可謂是繪制中的核心，理論上，通過path路徑可以繪制出任意的二維圖形，掌握path路徑的繪制，就相當于掌握了繪制的核心，今天介紹一個路徑繪制中的基本常用操作，路徑聯(lián)合，將兩個path路徑通過特定的方式合成為一個新的path路徑。

方法

路徑聯(lián)合的核心方法為Path類里的一個靜態(tài)combine()方法，如下：

// 通過path1和path2路徑的到新的路徑p
Path path = Path.combine(PathOperation operation, Path path1, Path path2);

方法體有三個入?yún)?，分別為聯(lián)合方式、path1、path2 ,通過聯(lián)合方式將path1和path2進行聯(lián)合返回一個新path，具體的聯(lián)合方式都有哪些呢，那就看下PathOperation這個類。

點進源碼發(fā)現(xiàn)PathOperation是一個枚舉類型，一共有5個類型，也就是有5種聯(lián)合方式。如下：

enum PathOperation {
  /// 得到path1單獨區(qū)域 也可理解為path1-path2差集
  difference,
  /// 得到path2單獨區(qū)域 同理
  reverseDifference,
  /// 得到 path1&path2的交集區(qū)域
  intersect,
  /// 得到 path1&path2的補集區(qū)域
  xor,
  /// 得到 path1&path2的并集區(qū)域
  union,
}

如果path1和path2路徑有重合的部分，通過以上方式分別可以得到不同的新path。

為了直觀體現(xiàn),我們繪制以下兩個path路徑的圓形，它們之間有重合部分，也有獨立的部分。
兩個圓環(huán)重疊在一起，那么這時候我們就可以通過上面的五種路徑聯(lián)合方式獲取到這兩個個圓環(huán)中的任意交叉的圖。

注：通過聯(lián)合得到的path路徑都是一個閉合路徑，原始路徑如果是非閉合路徑，會默認閉合，再進行聯(lián)合。

上面xor的聯(lián)合方式再畫筆為線條時看不出區(qū)別，將畫筆設為填充，就發(fā)現(xiàn)其實雖然看起來一樣，但是路徑已經(jīng)發(fā)生改變。

總結下5種聯(lián)合方式：2個取單獨自己的，2個分別取相同的部分和不同的部分，1個我全都要。

其實通過這5種聯(lián)合功能，我們就可以輕松的繪制出一些比較復雜的圖形，比如下面的例子：

太極

太極圖正?？梢杂秘惾麪柷€或弧線繪制，但是通過路徑聯(lián)合方式就會變得非常簡單，只需要繪制圓和矩形就行了。

首先我們繪制一個黑色圓，

其次利用矩形區(qū)域和圓進行路徑聯(lián)合得到半圓區(qū)域填充白色，

最后再繪制兩個小圓，添加兩個太極眼，完成。

只需簡單的三步我們就畫出了太極圖，并且使用的都是現(xiàn)成的基礎幾何圖形。

核心代碼：

// 大圓直徑
 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);