Flutter繪制之路徑聯(lián)合詳解
前言
在Flutter
繪制中,path
路徑可謂是繪制中的核心,理論上,通過path
路徑可以繪制出任意的二維圖形,掌握path
路徑的繪制,就相當(dāng)于掌握了繪制的核心,今天介紹一個路徑繪制中的基本常用操作,路徑聯(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
進(jìn)行聯(lián)合返回一個新path
,具體的聯(lián)合方式都有哪些呢,那就看下PathOperation
這個類。
點進(jìn)源碼發(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路徑都是一個閉合路徑,原始路徑如果是非閉合路徑,會默認(rèn)閉合,再進(jìn)行聯(lián)合。
上面xor
的聯(lián)合方式再畫筆為線條時看不出區(qū)別,將畫筆設(shè)為填充,就發(fā)現(xiàn)其實雖然看起來一樣,但是路徑已經(jīng)發(fā)生改變。
總結(jié)下5種聯(lián)合方式:2個取單獨自己的,2個分別取相同的部分和不同的部分,1個我全都要。
其實通過這5種聯(lián)合功能,我們就可以輕松的繪制出一些比較復(fù)雜的圖形,比如下面的例子:
太極
太極圖正??梢杂秘惾麪柷€或弧線繪制,但是通過路徑聯(lián)合方式就會變得非常簡單,只需要繪制圓和矩形就行了。
首先我們繪制一個黑色圓,
其次利用矩形區(qū)域和圓進(jìn)行路徑聯(lián)合得到半圓區(qū)域填充白色,
最后再繪制兩個小圓,添加兩個太極眼,完成。
只需簡單的三步我們就畫出了太極圖,并且使用的都是現(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)合配合動畫實現(xiàn)月圓月缺變化情況,背景利用隨機數(shù)生成隨機坐標(biāo)繪制一些星星,多角形的繪制有興趣可以看下之前這篇文章 Flutter實現(xiàn)一個多邊形or多角星組件。
將圓形進(jìn)行位移重合,達(dá)到天狗食月的效果,代碼就不貼了。
總結(jié)
路徑聯(lián)合一共有5種方式,雖然只有5種,但是這5種方式其實已經(jīng)涵蓋了兩個圖形的任意可能會出現(xiàn)的區(qū)域,熟練掌握路徑聯(lián)合方式,對于一些復(fù)雜的圖形我們就可以通過聯(lián)合方式巧妙的生成,希望對正在閱讀的你在Flutter繪制中有所幫助 ~
到此這篇關(guān)于Flutter繪制之路徑聯(lián)合詳解的文章就介紹到這了,更多相關(guān)Flutter路徑聯(lián)合內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解析android創(chuàng)建快捷方式會啟動兩個應(yīng)用的問題
本篇文章是對關(guān)于android創(chuàng)建快捷方式會啟動兩個應(yīng)用的問題進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06Android自定義控件實現(xiàn)圓形進(jìn)度CircleProgressBar
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實現(xiàn)圓形進(jìn)度CircleProgressBar,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05Android實現(xiàn)簡單實用的垂直進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)簡單實用的垂直進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07Android編程基于Contacts讀取聯(lián)系人的方法(附demo源碼)
這篇文章主要介紹了Android編程基于Contacts讀取聯(lián)系人的方法,實例分析了Contacts讀取的實現(xiàn)方法及權(quán)限設(shè)置方法,并附帶了完整實例供讀者下載參考,需要的朋友可以參考下2015-12-12Android ViewPagerIndicator詳解及實例代碼
這篇文章主要介紹了Android ViewPagerIndicator詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05Android開發(fā)Viewbinding委托實例詳解
這篇文章主要為大家介紹了Android開發(fā)Viewbinding委托實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06