欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年06月21日 17:14:19   作者:老李code  
在Flutter繪制中,path路徑可謂是繪制中的核心,通過(guò)path路徑可以繪制出任意的二維圖形,所以本文就來(lái)和大家聊聊Flutter中路徑聯(lián)合的相關(guān)知識(shí),感興趣的可以了解一下

前言

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

方法

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

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

方法體有三個(gè)入?yún)ⅲ謩e為聯(lián)合方式、path1、path2 ,通過(guò)聯(lián)合方式將path1path2進(jìn)行聯(lián)合返回一個(gè)新path,具體的聯(lián)合方式都有哪些呢,那就看下PathOperation這個(gè)類。

點(diǎn)進(jìn)源碼發(fā)現(xiàn)PathOperation是一個(gè)枚舉類型,一共有5個(gè)類型,也就是有5種聯(lián)合方式。如下:

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

如果path1path2路徑有重合的部分,通過(guò)以上方式分別可以得到不同的新path。

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

注:通過(guò)聯(lián)合得到的path路徑都是一個(gè)閉合路徑,原始路徑如果是非閉合路徑,會(huì)默認(rèn)閉合,再進(jìn)行聯(lián)合。

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

總結(jié)下5種聯(lián)合方式:2個(gè)取單獨(dú)自己的,2個(gè)分別取相同的部分和不同的部分,1個(gè)我全都要。

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

太極

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

首先我們繪制一個(gè)黑色圓,

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

最后再繪制兩個(gè)小圓,添加兩個(gè)太極眼,完成。

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

核心代碼:

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

天狗食月

還可以利用路徑聯(lián)合配合動(dòng)畫(huà)實(shí)現(xiàn)月圓月缺變化情況,背景利用隨機(jī)數(shù)生成隨機(jī)坐標(biāo)繪制一些星星,多角形的繪制有興趣可以看下之前這篇文章 Flutter實(shí)現(xiàn)一個(gè)多邊形or多角星組件。

將圓形進(jìn)行位移重合,達(dá)到天狗食月的效果,代碼就不貼了。

總結(jié)

路徑聯(lián)合一共有5種方式,雖然只有5種,但是這5種方式其實(shí)已經(jīng)涵蓋了兩個(gè)圖形的任意可能會(huì)出現(xiàn)的區(qū)域,熟練掌握路徑聯(lián)合方式,對(duì)于一些復(fù)雜的圖形我們就可以通過(guò)聯(lián)合方式巧妙的生成,希望對(duì)正在閱讀的你在Flutter繪制中有所幫助 ~

到此這篇關(guān)于Flutter繪制之路徑聯(lián)合詳解的文章就介紹到這了,更多相關(guān)Flutter路徑聯(lián)合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論