Android+Flutter實(shí)現(xiàn)彩虹圖案的繪制
閑暇時(shí),又聽(tīng)到了這首歌. 抑郁質(zhì)性格的人難免會(huì)惆悵,美好的東西轉(zhuǎn)瞬即逝.不過(guò)誰(shuí)叫咱們是程序員呢~ 這就安排上.整上一個(gè)想看就看的彩虹!
玩轉(zhuǎn)彩虹
彩虹,是氣象中的一種光學(xué)現(xiàn)象,當(dāng)太陽(yáng)光照射到半空中的水滴,光線被折射及反射,在天空上形成拱形的七彩光譜,由外圈至內(nèi)圈呈紅、橙、黃、綠、藍(lán)、靛藍(lán)、藍(lán)紫七種顏色. 相信小伙伴們?cè)诖笥赀^(guò)后的不經(jīng)意間都見(jiàn)過(guò)吧! 接下來(lái),我們就自己手動(dòng)繪制一下.一般這種, 我們都會(huì)分析一下繪制的步驟.
分析步驟
彩虹實(shí)際上就是7道拱橋型狀的顏色堆積,繪制彩虹第一步我們不如先繪制一道拱橋形狀的顏色塊.也就是說(shuō), 本質(zhì)上我們繪制一個(gè)半圓環(huán)即可解決問(wèn)題.
繪制半圓環(huán)
在Flutter中, 半圓環(huán)都繪制有很多方法. 比如canvas中,有drawOval(rect,paint) 的方法,這種方法可以繪制出一整個(gè)圓環(huán), 我們可以對(duì)它作切割即可. 不過(guò)這種方法不便利的是它控制不了圓環(huán)的進(jìn)度, 有沒(méi)有一種方法可以讓我們自己去控制圓環(huán)繪制的進(jìn)度呢? 答案就是Path, 好多伙伴們應(yīng)該都對(duì)Path 有過(guò)或多或少都了解, 它不僅可以畫(huà)直線、三角形、圓錐,更可以畫(huà)優(yōu)美的貝塞爾曲線. 這里我們調(diào)用它的acrTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) 方法, 它的參數(shù):
rect: 給定一個(gè)矩形范圍,在矩形范圍中繪制弧形. 也就是我們?nèi)绻钦叫蔚脑?實(shí)際上繪制的便是一個(gè)圓形,如果是長(zhǎng)方形的話最終產(chǎn)物就是橢圓形.
startAngle: 起始的角度
sweepAngle: 掃過(guò)的角度 實(shí)際上這里的坐標(biāo)系和笛卡爾坐標(biāo)系是一樣的, 所以是從x軸開(kāi)始算的, 也就是順時(shí)針?lè)较蚍謩e是0 -> pi/2 -> pi -> 3/2pi-> 2pi. 我們假設(shè)startAngle是0的話, sweepAngle為1/3pi, 那么最終的圓弧如圖左示.
forceMoveTo: false的時(shí)候,添加一個(gè)線段開(kāi)始于當(dāng)前點(diǎn),結(jié)束于弧的起點(diǎn).true時(shí)為原點(diǎn).
理論知識(shí)了解完畢以后,我們通過(guò)如下代碼進(jìn)行繪制試一下:
{ Path path = Path(); path.moveTo(-width, 0.0); path.arcTo( Rect.fromCenter(center: Offset.zero, width: width, height: width), -pi, pi, true, ); }
結(jié)果如圖:
第一道圓弧已經(jīng)出來(lái)了, 說(shuō)明理論上這樣做可行.
多道圓弧
一道圓弧既然可以了, 我們首先記錄下彩虹的顏色
final List<Color> colors = const [ Color(0xFF8B00FF), Color(0xFF0000FF), Color(0xFF00FFFF), Color(0xFF00FF00), Color(0xFFFFFF00), Color(0xFFFF7F00), Color(0xFFFF0000), ];
記錄好顏色后, 我們首先回顧一下. 剛剛一道圓弧是怎么繪制的呢? 通過(guò)path的arcTo()方法,起始在負(fù)x軸, 終止于x軸.也就是說(shuō)我們重復(fù)的繪制上七道, 只需要半徑不一樣即可繪制出相互連接的顏色體.
for (var color in colors) { _paint.color = color; // 繪制圓弧 drawArc(); canvas.drawPath(path, _paint); // width 為每到圓弧的半徑 width += widthStep; }
嗯~ 沒(méi)錯(cuò), 結(jié)果確實(shí)和意料的一樣
但是,總覺(jué)得有些不完美. 彩虹似乎都是有光暈的吧~
添加光暈
好, 光暈說(shuō)來(lái)這不就來(lái)了.實(shí)際上我們可以通過(guò)畫(huà)筆繪制周圍部分作模糊當(dāng)作光暈的形成, 恰恰Paint的mastFilter 也提供了這個(gè)方法.
{ _paint.maskFilter = const MaskFilter.blur(BlurStyle.solid, 6); }
我們先簡(jiǎn)要分析一下MaskFilter.blur() 提供了參數(shù)有哪些用處吧~實(shí)際上也就是style和sigma.style控制最終繪制出來(lái)的效果.sigma控制效果的大小.這里我們使用BlurStyle.solid就可以繪制出光暈的效果
光暈也有了, 但是我感覺(jué)不夠個(gè)性. 我希望它可以像扇子一樣展開(kāi)收起. 我們來(lái)看看怎么實(shí)現(xiàn).
動(dòng)畫(huà)
實(shí)際上控制它的展開(kāi)收起也就是在path中sweepAngle.我們最小掃過(guò)是0弧度,最大是pi. 我們控制了弧度變化也就控制了彩虹的展示大小.直接安排上repeat()動(dòng)畫(huà)
{ AnimationController _controller = AnimationController( vsync: this, // 這里需要把最大值改成pi, 這樣才會(huì)完全展開(kāi) upperBound: pi, duration: const Duration(seconds: 2), ); _controller.repeat(reverse: true); }
結(jié)果如圖:
源碼:https://github.com/weniner/flutter_demo/blob/main/lib/rainbow/widget/rainbow.dart
到此這篇關(guān)于Android+Flutter實(shí)現(xiàn)彩虹圖案的繪制的文章就介紹到這了,更多相關(guān)Android Flutter繪制彩虹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android自定義控件實(shí)現(xiàn)可左右滑動(dòng)的導(dǎo)航條
這篇文章主要介紹了Android自定義控件實(shí)現(xiàn)可左右滑動(dòng)的導(dǎo)航條,能響應(yīng)快速滑動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07Android導(dǎo)航欄功能項(xiàng)的顯示與屏蔽介紹
大家好,本篇文章主要講的是Android導(dǎo)航欄功能項(xiàng)的顯示與屏蔽介紹,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2021-12-12Android下拉刷新SwipeRefreshLayout控件使用方法
這篇文章主要介紹了Android下拉刷新SwipeRefreshLayout控件使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Android用戶注冊(cè)界面簡(jiǎn)單設(shè)計(jì)
這篇文章主要為大家分享了Android用戶注冊(cè)界面簡(jiǎn)單設(shè)計(jì),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10Android編程之計(jì)時(shí)器Chronometer簡(jiǎn)單示例
這篇文章主要介紹了Android計(jì)時(shí)器Chronometer簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了Android計(jì)時(shí)器Chronometer的定義、事件響應(yīng)及界面布局相關(guān)操作技巧,需要的朋友可以參考下2017-08-08詳解android webView獨(dú)立進(jìn)程通訊方式
本篇文章主要介紹了android webView獨(dú)立進(jìn)程通訊方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09