快捷導(dǎo)航

Android+Flutter實(shí)現(xiàn)彩虹圖案的繪制

更新時(shí)間：2022年11月30日 10:36:25 作者：WeninerIo

彩虹，是氣象中的一種光學(xué)現(xiàn)象，當(dāng)太陽(yáng)光照射到半空中的水滴，光線(xiàn)被折射及反射，在天空上形成拱形的七彩光譜。接下來(lái),我們就自己手動(dòng)繪制一下彩虹圖案吧

玩轉(zhuǎn)彩虹

彩虹，是氣象中的一種光學(xué)現(xiàn)象，當(dāng)太陽(yáng)光照射到半空中的水滴，光線(xiàn)被折射及反射，在天空上形成拱形的七彩光譜，由外圈至內(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à)直線(xiàn)、三角形、圓錐,更可以畫(huà)優(yōu)美的貝塞爾曲線(xiàn). 這里我們調(diào)用它的acrTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) 方法, 它的參數(shù):

rect: 給定一個(gè)矩形范圍,在矩形范圍中繪制弧形. 也就是我們?nèi)绻钦叫蔚脑?huà),實(shí)際上繪制的便是一個(gè)圓形,如果是長(zhǎng)方形的話(huà)最終產(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的話(huà), sweepAngle為1/3pi, 那么最終的圓弧如圖左示.

forceMoveTo: false的時(shí)候,添加一個(gè)線(xiàn)段開(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à)筆繪制周?chē)糠肿髂：?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é)果如圖: