CustomPaint class提供了讓用戶自定義widget的能力,它暴露了一個canvas,可以通過這個canvas來繪制widget,CustomPaint會先調用painter繪制背景,然后再繪制child,最后調用foregroundPainter來繪制前景,CustomPaint的定義如下
創(chuàng)新互聯致力于成都網站設計、成都網站建設,成都網站設計,集團網站建設等服務標準化,推過標準化降低中小企業(yè)的建站的成本,并持續(xù)提升建站的定制化服務水平進行質量交付,讓企業(yè)網站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯,就選擇了安全、穩(wěn)定、美觀的網站建設服務!
CustomPaint的繪制過程都將會交給CustomPainter來完成,CustomPainter是個抽象接口,在子類化CustomPainter的時候必須要重寫它的 paint 跟 shouldRepaint 接口,可以根據自己的場景來選擇性的重寫 hitTest 跟 shouldRebuildSemantics 方法。
canvas--畫布,真正的繪制是由canvas跟paint來完成的,畫布提供了各種繪制的接口來繪制圖形,除此以外畫布還提供了平移、縮放、旋轉等矩陣變換接口,畫布都有固定大小跟形狀,還可以使用畫布提供的裁剪接口來裁剪畫布的大小形狀等等。
常用的繪制接口有 更多請查看官方文檔
Paint---筆畫,是用來設置在畫布上面繪制圖形時的一些筆畫屬性,如:顏色、線寬、繪制模式、抗鋸齒等等。常用屬性有 更多請查看官方文檔
color : 設置畫筆顏色
isAntiAlias : 設置畫筆是否扛鋸齒
shader : 著色器,填充形狀或者畫線時用到,如果沒設置將會使用color
strokeWidth : 設置畫筆畫線寬度
style :繪制模式,畫線或充滿
下面這個例子來自于官方,通過 CustomPaint 畫出了一個藍天跟太陽出來
效果如下:
1.要繪制貝塞爾線,我們需要四個點: 起點 , 終點 和 兩個控制點 ,如下圖所示。移動控制點會改變曲線的斜率。您可以在此 在線工具中 使用控制點。
我們可以使用類Path的cubicTo方法繪制貝塞爾曲線:
使用控制點(x1,y1)和(x2,y2)添加從當前點到給定點(x3,y3)的曲線的三次貝塞爾曲線段。
如您所見,該cubicTo方法接受三個參數。其中兩個是控制點,最后一個參數是終點。起點是您的筆已經位于畫布上的位置。
不要忘記在畫布坐標中,左上角是(0,0)點,右下角是(size.width,size.height)。因此,請嘗試相應地調整四點:
請記住,paint對象就像我們的筆,我們將其顏色設置為藍色,寬度設置為3。
我們用path對象描述了bezier路徑。該moveTo方法已用于將筆移動到路徑的起點。然后我們調用cubicTo方法來定義控制點和終點。之后,我們使用該drawPath方法繪制了路徑。
貝塞爾曲線參考:
///推薦一些曲線圖/折線圖/柱狀圖參考:
all first_rank_v2~rank_v25-2-95632571.nonecaseutm_term=flutter%20%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6%E6%9B%B2%E7%BA%BF
Flutter中自定義組件一般有兩種方式:
CustomPaint繼承自SingleChildRenderObjectWidget,即它可以在通過嵌套引入到widget樹中,并且可以有一個child子widget。它的構造方法如下:
painter和foregroundPainter需要接收CustomPainter對象,是CustomPaint核心。CustomPainter是進行UI繪制的核心類,繪制時, CustomPaint 首先在畫布上調用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調用 foregroundPainter 進行繪制。
size屬性標識繪制區(qū)域大小,但當CustomPaint有child,該屬性將會忽略,而使用child的大小為繪制區(qū)域大小。
isComplex和willChange用于控制繪制層緩存處理的,這里暫不討論。
可實現CustomPainter子類進行UI繪制
實現paint方法進行真正的繪制,canvas是畫布對象,size是繪制區(qū)域,是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發(fā)十分類似,連API都十分相像,這點對熟悉Android原生開發(fā)者真是太友好了。
Paint對象是畫筆對象,就是繪圖工具,我們可以設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及作畫風格等,通過這些屬性我們可以很方便的來定制自己的UI效果,在繪制的過程中可以定義多個畫筆,以便實現多種風格圖形的集合。
根據需求選擇合適的畫筆屬性,完成你的繪制。
Canvas是繪制的畫布,它包含了很多繪制方法,可以繪制出各種形狀的圖形。需要注意的是,畫布是應用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內容的,每次繪制都應該限制在本控件的區(qū)域(Size)內, 以免繪制覆蓋到其他組件。
下面介紹下Canvas的繪制方法:
PointMode是個枚舉
p1、p2為線段兩個端點
Rect定義矩形的大小位置,有多種構造方式:
RRect描述圓角矩形,他通過Rect和Radius來構造
畫圓比較簡單,c表示圓心位置,radius是半徑。
橢圓使用外接矩形確定大小位置,rect就是外接矩形。
繪制弧形,先確定弧形對應的橢圓,同樣地用外接矩形rect確定橢圓,然后根據起始點和結束點角度來確定那一段弧度,startAngle,sweepAngle分別代表起始和結束點角度,角度用弧度表示法。
useCenter表示是否連接閉合形狀,userCenter = false表示不閉合,即畫一段弧線,userCenter = true表示閉合,即繪制一個扇形。
繪制路徑,關鍵在于構建路徑Path,可以直接new Path對象,然后通過path方法可以連接出圖形,path關鍵方法如下:
還有其他方法,有興趣可以查看API。