快捷導(dǎo)航

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

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

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

玩轉(zhuǎn)彩虹

彩虹，是氣象中的一種光學(xué)現(xiàn)象，當(dāng)太陽光照射到半空中的水滴，光線被折射及反射，在天空上形成拱形的七彩光譜，由外圈至內(nèi)圈呈紅、橙、黃、綠、藍(lán)、靛藍(lán)、藍(lán)紫七種顏色. 相信小伙伴們在大雨過后的不經(jīng)意間都見過吧! 接下來,我們就自己手動繪制一下.一般這種, 我們都會分析一下繪制的步驟.

分析步驟

彩虹實際上就是7道拱橋型狀的顏色堆積,繪制彩虹第一步我們不如先繪制一道拱橋形狀的顏色塊.也就是說, 本質(zhì)上我們繪制一個半圓環(huán)即可解決問題.

繪制半圓環(huán)

在Flutter中, 半圓環(huán)都繪制有很多方法. 比如canvas中,有drawOval(rect,paint) 的方法,這種方法可以繪制出一整個圓環(huán), 我們可以對它作切割即可. 不過這種方法不便利的是它控制不了圓環(huán)的進度, 有沒有一種方法可以讓我們自己去控制圓環(huán)繪制的進度呢? 答案就是Path, 好多伙伴們應(yīng)該都對Path 有過或多或少都了解, 它不僅可以畫直線、三角形、圓錐,更可以畫優(yōu)美的貝塞爾曲線. 這里我們調(diào)用它的acrTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) 方法, 它的參數(shù):

rect: 給定一個矩形范圍,在矩形范圍中繪制弧形. 也就是我們?nèi)绻钦叫蔚脑?實際上繪制的便是一個圓形,如果是長方形的話最終產(chǎn)物就是橢圓形.

startAngle: 起始的角度

sweepAngle: 掃過的角度實際上這里的坐標(biāo)系和笛卡爾坐標(biāo)系是一樣的, 所以是從x軸開始算的, 也就是順時針方向分別是0 -> pi/2 -> pi -> 3/2pi-> 2pi. 我們假設(shè)startAngle是0的話, sweepAngle為1/3pi, 那么最終的圓弧如圖左示.

forceMoveTo: false的時候,添加一個線段開始于當(dāng)前點，結(jié)束于弧的起點.true時為原點.

理論知識了解完畢以后,我們通過如下代碼進行繪制試一下:

{
    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)出來了, 說明理論上這樣做可行.

多道圓弧

一道圓弧既然可以了, 我們首先記錄下彩虹的顏色

  final List<Color> colors = const [
    Color(0xFF8B00FF),
    Color(0xFF0000FF),
    Color(0xFF00FFFF),
    Color(0xFF00FF00),
    Color(0xFFFFFF00),
    Color(0xFFFF7F00),
    Color(0xFFFF0000),
  ];

記錄好顏色后, 我們首先回顧一下. 剛剛一道圓弧是怎么繪制的呢? 通過path的arcTo()方法,起始在負(fù)x軸, 終止于x軸.也就是說我們重復(fù)的繪制上七道, 只需要半徑不一樣即可繪制出相互連接的顏色體.

    for (var color in colors) {
      _paint.color = color;
      // 繪制圓弧
      drawArc();
      canvas.drawPath(path, _paint);
      // width 為每到圓弧的半徑
      width += widthStep;
    }

嗯~ 沒錯, 結(jié)果確實和意料的一樣

但是,總覺得有些不完美. 彩虹似乎都是有光暈的吧~

添加光暈

好, 光暈說來這不就來了.實際上我們可以通過畫筆繪制周圍部分作模糊當(dāng)作光暈的形成, 恰恰Paint的mastFilter 也提供了這個方法.

{
    _paint.maskFilter = const MaskFilter.blur(BlurStyle.solid, 6);
}

我們先簡要分析一下MaskFilter.blur() 提供了參數(shù)有哪些用處吧~實際上也就是style和sigma.style控制最終繪制出來的效果.sigma控制效果的大小.這里我們使用BlurStyle.solid就可以繪制出光暈的效果

光暈也有了, 但是我感覺不夠個性. 我希望它可以像扇子一樣展開收起. 我們來看看怎么實現(xiàn).

動畫

實際上控制它的展開收起也就是在path中sweepAngle.我們最小掃過是0弧度,最大是pi. 我們控制了弧度變化也就控制了彩虹的展示大小.直接安排上repeat()動畫

{
    AnimationController _controller = AnimationController(
      vsync: this,
      // 這里需要把最大值改成pi, 這樣才會完全展開
      upperBound: pi,
      duration: const Duration(seconds: 2),
    );
    _controller.repeat(reverse: true);
}

結(jié)果如圖: