CustomPaint class提供了讓用戶自定義widget的能力，它暴露了一個canvas，可以通過這個canvas來繪制widget，CustomPaint會先調(diào)用painter繪制背景，然后再繪制child，最后調(diào)用foregroundPainter來繪制前景，CustomPaint的定義如下
創(chuàng)新互聯(lián)主營都江堰網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),都江堰h(yuǎn)5小程序開發(fā)搭建,都江堰網(wǎng)站營銷推廣歡迎都江堰等地區(qū)企業(yè)咨詢
CustomPaint的繪制過程都將會交給CustomPainter來完成，CustomPainter是個抽象接口，在子類化CustomPainter的時候必須要重寫它的 paint 跟 shouldRepaint 接口，可以根據(jù)自己的場景來選擇性的重寫 hitTest 跟 shouldRebuildSemantics 方法。
canvas--畫布，真正的繪制是由canvas跟paint來完成的，畫布提供了各種繪制的接口來繪制圖形，除此以外畫布還提供了平移、縮放、旋轉(zhuǎn)等矩陣變換接口，畫布都有固定大小跟形狀，還可以使用畫布提供的裁剪接口來裁剪畫布的大小形狀等等。
常用的繪制接口有 更多請查看官方文檔
Paint---筆畫，是用來設(shè)置在畫布上面繪制圖形時的一些筆畫屬性，如：顏色、線寬、繪制模式、抗鋸齒等等。常用屬性有 更多請查看官方文檔
color ： 設(shè)置畫筆顏色
isAntiAlias ： 設(shè)置畫筆是否扛鋸齒
shader : 著色器，填充形狀或者畫線時用到，如果沒設(shè)置將會使用color
strokeWidth ： 設(shè)置畫筆畫線寬度
style ：繪制模式，畫線或充滿
下面這個例子來自于官方，通過 CustomPaint 畫出了一個藍(lán)天跟太陽出來
效果如下：
Element管理Widget和RenderObject。
widget保持顯示當(dāng)前的頁面狀態(tài)，當(dāng)widget產(chǎn)生點擊等交互，調(diào)用setState()改變element中管理的state，
小菜在學(xué)習(xí)時需要用到氣泡效果，為了更加靈活，小菜封裝了一個簡單的 flutter_bubble 氣泡插件，方便日常的使用；
小菜準(zhǔn)備用 Canvas 的 drawPath 進行繪制，主要分為三個部分，圓角弧線，普通直線，尖角折線，均可由 drawPath 自帶方法繪制；小菜以前整理過關(guān)于 Canvas 繪制的小博客，實現(xiàn)很簡單；
小菜繪制了一個簡陋的原型圖，整體黑框為 Bubble Widget 整體范圍；藍(lán)色圓弧為圓角位置；紅色尖角可根據(jù)上下左右參數(shù)進行配置，且只可展示一個，尖角的高度和角度可自由配置，當(dāng)確定一個尖角位置時，其余三個方向?qū)捀哐由斓胶诳虿糠?；而橙線則是連接圓角與尖角等直線；中間空余部分為子 Widget 位置； Tips: Child Widget 寬高小于等于 Bubble Widget ；
首先在邊角處繪制四個圓弧，直接用 arcTo 即可，需要注意的是：小菜整體以 drawPath 方式實現(xiàn)，準(zhǔn)備從左上角開始順時針繪制，所以繪制圓弧時也是順時針方向；
小菜理解， Rect 為繪制圓角的矩形，包括位置及大小； startAngele 為起始角度； sweepAngle 為繪制弧形角度；小菜需要的四個圓弧大小均為 pi/2 ，只需調(diào)整矩形位置與起始角度即可；
其次繪制尖角，小菜的尖角是由 lineTo 兩段直線拼接起來的，只需要處理起點與終點即可；小菜為了更加靈活，可以設(shè)置尖角高度與尖角角度(0 ~ 180)，通過三角函數(shù)進行計算；
最后就是將處理好的連接起來，小菜為了適應(yīng)更多場景，尖角位置也可自由配置，長度為到圓角的距離，默認(rèn)為邊框中間位置；
小菜將配置邏輯編輯好發(fā)布到 Pub 庫，基本 BubbleWidget 便完成，簡單分析一下可配置項；
自定義 Bubble Widget 是小菜發(fā)布的第二款 Pub 插件，還有很多不完善的地方，如有錯誤請多多指導(dǎo)！
Flutter中自定義組件一般有兩種方式：
CustomPaint繼承自SingleChildRenderObjectWidget，即它可以在通過嵌套引入到widget樹中，并且可以有一個child子widget。它的構(gòu)造方法如下：
painter和foregroundPainter需要接收CustomPainter對象，是CustomPaint核心。CustomPainter是進行UI繪制的核心類，繪制時, CustomPaint 首先在畫布上調(diào)用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調(diào)用 foregroundPainter 進行繪制。
size屬性標(biāo)識繪制區(qū)域大小，但當(dāng)CustomPaint有child，該屬性將會忽略，而使用child的大小為繪制區(qū)域大小。
isComplex和willChange用于控制繪制層緩存處理的，這里暫不討論。
可實現(xiàn)CustomPainter子類進行UI繪制
實現(xiàn)paint方法進行真正的繪制，canvas是畫布對象，size是繪制區(qū)域，是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發(fā)十分類似，連API都十分相像，這點對熟悉Android原生開發(fā)者真是太友好了。
Paint對象是畫筆對象，就是繪圖工具，我們可以設(shè)置畫筆的顏色、粗細(xì)、是否抗鋸齒、筆觸形狀以及作畫風(fēng)格等，通過這些屬性我們可以很方便的來定制自己的UI效果，在繪制的過程中可以定義多個畫筆，以便實現(xiàn)多種風(fēng)格圖形的集合。
根據(jù)需求選擇合適的畫筆屬性，完成你的繪制。
Canvas是繪制的畫布，它包含了很多繪制方法，可以繪制出各種形狀的圖形。需要注意的是，畫布是應(yīng)用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內(nèi)容的，每次繪制都應(yīng)該限制在本控件的區(qū)域(Size)內(nèi), 以免繪制覆蓋到其他組件。
下面介紹下Canvas的繪制方法：
PointMode是個枚舉
p1、p2為線段兩個端點
Rect定義矩形的大小位置，有多種構(gòu)造方式:
RRect描述圓角矩形，他通過Rect和Radius來構(gòu)造
畫圓比較簡單，c表示圓心位置，radius是半徑。
橢圓使用外接矩形確定大小位置，rect就是外接矩形。
繪制弧形，先確定弧形對應(yīng)的橢圓，同樣地用外接矩形rect確定橢圓，然后根據(jù)起始點和結(jié)束點角度來確定那一段弧度，startAngle，sweepAngle分別代表起始和結(jié)束點角度，角度用弧度表示法。
useCenter表示是否連接閉合形狀，userCenter = false表示不閉合，即畫一段弧線，userCenter = true表示閉合，即繪制一個扇形。
繪制路徑，關(guān)鍵在于構(gòu)建路徑Path，可以直接new Path對象，然后通過path方法可以連接出圖形，path關(guān)鍵方法如下：
還有其他方法，有興趣可以查看API。
1.要繪制貝塞爾線，我們需要四個點： 起點 ， 終點 和 兩個控制點 ，如下圖所示。移動控制點會改變曲線的斜率。您可以在此 在線工具中 使用控制點。
我們可以使用類Path的cubicTo方法繪制貝塞爾曲線：
使用控制點（x1，y1）和（x2，y2）添加從當(dāng)前點到給定點（x3，y3）的曲線的三次貝塞爾曲線段。
如您所見，該cubicTo方法接受三個參數(shù)。其中兩個是控制點，最后一個參數(shù)是終點。起點是您的筆已經(jīng)位于畫布上的位置。
不要忘記在畫布坐標(biāo)中，左上角是（0,0）點，右下角是（size.width，size.height）。因此，請嘗試相應(yīng)地調(diào)整四點：
請記住，paint對象就像我們的筆，我們將其顏色設(shè)置為藍(lán)色，寬度設(shè)置為3。
我們用path對象描述了bezier路徑。該moveTo方法已用于將筆移動到路徑的起點。然后我們調(diào)用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
重慶分公司
重慶分公司
