詳解利用Flutter中的Canvas繪制有趣的圖形

更新時間：2022年03月22日 16:05:24 作者：島上碼農

本文將利用Flutter中的Canvas繪制三個有趣的圖形：使用等邊三角形組合成彩虹傘面、五角星和彩虹，快來跟隨小編一起動手嘗試一下吧

簡介

上一篇我們介紹了使用 Flutter 的 Canvas 繪制基本圖形的示例，簡單的示例沒什么好玩的，今天這一篇我們來點有趣的，我們會完成如下圖形的繪制：

發(fā)現(xiàn)數(shù)學重復之美：使用等邊三角形組合成彩虹傘面。
繪制彩虹。
繪制評分用的五角星。

通過這一篇，我們可以知道自定義形狀繪制的基本原理，然后可以在這個基礎上繪制你自己想要繪制的圖形。

等邊三角形構建重復之美

首先我們來繪制等邊三角形，其實上一篇我們也有繪制等邊三角形，只是那是將三個頂點手動計算出來的，這一篇我們封裝一個繪制等邊三角形的通用方法。老規(guī)矩，先定義方法的輸入?yún)?shù)，如下所示：

canvas：Canvas 畫布
color：繪制顏色
startVertex：三角形的第一個頂點位置，這里我們其他邊都是相對這個點旋轉的
length：邊長
startAngle：第一條邊相對水平方向旋轉的夾角，這樣我們可以改變夾角來更改三角形的繪制位置。
clockwise：順時針繪制，如果是順時針，則繪制的偏移夾角往順時針方向開始，否則逆時針。
filled：是否填充圖形。

void drawEquilateralTriangle(
    Canvas canvas, {
    required Color color,
    required Offset startVertex,
    required double length,
    double startAngle = 0,
    clockwise = true,
    filled = true,
  })

等邊三角形基于一個頂點，一條邊和起始角度后就可以計算其他兩個頂點的位置，具體推到通過三角函數(shù)就可以了。

具體計算三角形的三個頂點的方法如下，這里逆時針方向和順時針方向的計算方式有點不同，需要區(qū)分一下。

static List<Offset> getEquilateralTriangleVertexes(
      Offset startVertex, double length,
      {double startAngle = 0, bool clockwise = true}) {
  double point2X, point2Y, point3X, point3Y;
  point2X = startVertex.dx + length * cos(startAngle);
  point2Y = startVertex.dy - length * sin(startAngle);
  if (clockwise) {
    point3X = startVertex.dx + length * cos(pi / 3 + startAngle);
    point3Y = startVertex.dy - length * sin(pi / 3 + startAngle);
  } else {
    point3X = startVertex.dx + length * cos(pi / 3 - startAngle);
    point3Y = startVertex.dy + length * sin(pi / 3 - startAngle);
  }

  return [startVertex, Offset(point2X, point2Y), Offset(point3X, point3Y)];
}

有了頂點我們就可以使用 Path 將頂點連起來就完成等邊三角形的繪制了，繪制三角形的實現(xiàn)方法如下：

void drawEquilateralTriangle(
    Canvas canvas, {
    required Color color,
    required Offset startVertex,
    required double length,
    double startAngle = 0,
    clockwise = true,
    filled = true,
  }) {
    assert(length > 0);
    Path trianglePath = Path();
    List<Offset> vertexes = ShapesUtil.getEquilateralTriangleVertexes(
      startVertex,
      length,
      clockwise: clockwise,
      startAngle: startAngle,
    );
    trianglePath.moveTo(vertexes[0].dx, vertexes[0].dy);
    for (int i = 1; i < vertexes.length; i++) {
      trianglePath.lineTo(vertexes[i].dx, vertexes[i].dy);
    }
    trianglePath.close();
    Paint paint = Paint();
    paint.color = color;
    if (!filled) {
      paint.style = PaintingStyle.stroke;
    }
    canvas.drawPath(trianglePath, paint);
  }
}

單獨一個三角形沒啥意思，我們通過畫6個等邊三角形，每個三角形旋轉60度，空心繪制看看怎么樣？

一個完美的六邊形出來了，再試試12個怎么樣。

形狀越多，會越接近圓形，你會充分發(fā)現(xiàn)對稱之美。下面是我們用24個三角形，填充不同顏色后的效果。有點像一把彩虹傘的傘面了，感覺是不是很美？

上面圖形的實現(xiàn)代碼如下，其中顏色是通過一個顏色數(shù)組完成的。

int number = 24;
for (int i = 0; i < number; ++i) {
  drawEquilateralTriangle(
    canvas,
    color: colors[i],
    startVertex: Offset(center.width, center.height),
    length: 120,
    startAngle: i * 2 * pi / number,
    clockwise: true,
    filled: true,
  );
}

繪制彩虹

有了上面的彩虹傘一樣的啟發(fā)，我們決定來繪制彩虹。彩虹其實比較簡單，繪制7條不同顏色的弧線即可。這里講一下弧線的繪制約束。如下圖所示，實際上弧線是通過矩形的內接橢圓限制的（這里用正方形，內接為圓形示例）。外面的矩形限制了橢圓位置和尺寸，而通過 startAngle (起始角度）和 sweepAngle (弧線覆蓋的角度范圍）就能夠確定弧線的起點和終點，從而得到一段弧線。注意的是，數(shù)學里我們是逆時針角度為正，但是在 Flutter 默認是順時針為正，因此如果你要從逆時針方向開始角度就要設置為負數(shù)。

下面是弧線繪制的示例代碼：

Path path1 = Path();
Rect rect1 = Rect.fromLTWH(startPoint.dx + (width - innerWidth) / 2,
    startPoint.dy + (width - innerWidth) / 2, innerWidth, innerWidth);
path1.arcTo(rect1, -pi / 6, -2 * pi / 3, true);
paint.color = colors[i];
canvas.drawPath(path1, paint);

有了這個基礎，我們通過循環(huán) ，繪制7條弧線，保證每條弧線挨著就行。而弧線的線條粗細可以用畫筆的寬度來搞定，代碼如下。我們這里每條弧線的中心、起始角度和覆蓋角度是一樣的，通過改變不同弧線的正方形邊長實現(xiàn)彩虹弧線的位置不同，然后畫筆粗細保持為每條彩虹的高度的一半就可以保證每條彩虹是挨著的了。

void drawRainbow(
    Canvas canvas, {
    required Offset startPoint,
    required double width,
  }) {
  assert(width > 0);
  var paint = Paint();
  double rowHeight = 12;
  paint.strokeWidth = rowHeight / 2;
  List<Color> colors = [
    Color(0xFFE05100),
    Color(0xFFF0A060),
    Color(0xFFE0E000),
    Color(0xFF10F020),
    Color(0xFF2080F5),
    Color(0xFF104FF0),
    Color(0xFFA040E5),
  ];
  paint.style = PaintingStyle.stroke;
  for (var i = 0; i < 7; i++) {
    double innerWidth = width - i * rowHeight;
    Path path1 = Path();
    Rect rect1 = Rect.fromLTWH(startPoint.dx + (width - innerWidth) / 2,
        startPoint.dy + (width - innerWidth) / 2, innerWidth, innerWidth);
    path1.arcTo(rect1, -pi / 6, -2 * pi / 3, true);
    paint.color = colors[i];
    canvas.drawPath(path1, paint);
  }
}

最終效果如下圖所示。

繪制五角星

五角星相對來說會復雜一些，主要是要知道通過中心點確定10個頂點的坐標，這里就需要利用二維坐標的旋轉公式了，具體可以查閱相關資料，結論是一個點(x2, y2)圍繞另一個點(x1, y1)旋轉某個角度（α）后得到的新坐標(x, y)計算方式如下：

x=x1+(x2-x1)*cos(α)-(y2-y1)*sin(α)

y=y1+(y2-y1)*cos(α)+(x2-x1)*sin(α)

有了這個基礎，我們就可以基于五角星的中心點，第一個頂點，邊長（間隔一個點連線的線段長度）來通過旋轉計算其他頂點了。其中外面5頂點一組計算，內部5個頂點一組計算。最終獲取5個頂點的代碼如下：

static List<Offset> getStarVertexes(Offset center, double length) {
  assert(length > 0);
  // 外接圓半徑計算（五角星銳角為36度）
  double radius = length / 2 / cos(18 / 180 * pi);
  // 內部頂點的半徑
  double innerRadius =
      radius / (cos(36 / 180 * pi) + sin(36 / 180 * pi) / sin(18 / 180 * pi));
  List<Offset> vertexes = [];
  Offset outerStartVertex = Offset(center.dx, center.dy - radius);
  Offset innerStartVertex = Offset(
    center.dx - innerRadius * sin(36 / 180 * pi),
    center.dy - innerRadius * cos(36 / 180 * pi),
  );
  vertexes.add(outerStartVertex);
  vertexes.add(innerStartVertex);
  // 計算方式為以第一個頂點圍繞五角星中心點坐標旋轉得到
  const double rotateAngle = 72 / 180 * pi;
  for (int i = 1; i < 5; ++i) {
    vertexes.add(Offset(
      center.dx +
          (outerStartVertex.dx - center.dx) * cos(-i * rotateAngle) -
          (outerStartVertex.dy - center.dy) * sin(-i * rotateAngle),
      center.dy +
          (outerStartVertex.dy - center.dy) * cos(-i * rotateAngle) +
          (outerStartVertex.dx - center.dx) * sin(-i * rotateAngle),
    ));
    vertexes.add(Offset(
      center.dx +
          (innerStartVertex.dx - center.dx) * cos(-i * rotateAngle) -
          (innerStartVertex.dy - center.dy) * sin(-i * rotateAngle),
      center.dy +
          (innerStartVertex.dy - center.dy) * cos(-i * rotateAngle) +
          (innerStartVertex.dx - center.dx) * sin(-i * rotateAngle),
    ));
  }

  return vertexes;
}

有了頂點，繪制方式就和三角形一樣了，將頂點連起來就好了。下面是我們繪制了一個常見的五星評分的圖形。

總結

本篇介紹了基于 Flutter 的 CustomPaint 繪制定制化圖形的示例，可以看到，其實只要 UI 小姐姐給出的圖形能夠用數(shù)學表達式表示出來，都可以用 CustomPaint 的 Canvas 來實現(xiàn)。

到此這篇關于詳解利用Flutter中的Canvas繪制有趣的圖形的文章就介紹到這了,更多相關Flutter Canvas圖形內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android sd卡讀取數(shù)據(jù)庫實例代碼
這篇文章主要介紹了Android sd卡讀取數(shù)據(jù)庫實例代碼的相關資料,需要的朋友可以參考下
2017-02-02
Android Animation之TranslateAnimation（平移動畫）
這篇文章主要為大家詳細介紹了Animation之TranslateAnimation平移動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
配置Android SDK
今天小編就為大家分享一篇關于配置Android SDK的文章，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-10-10
使用VideoView播放App中的資源文件
這篇文章主要介紹了使用VideoView播放App中的資源文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
Android APP之WebView校驗SSL證書的方法
這篇文章主要介紹了Android APP之WebView校驗SSL證書的方法,需要的朋友可以參考下
2017-09-09
Android如何動態(tài)改變App桌面圖標
這篇文章主要介紹了 Android動態(tài)改變App桌面圖標的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-01-01
Android序列化實現(xiàn)接口Serializable與Parcelable詳解
我們使用 Intent 傳遞數(shù)據(jù)的時候，putExtra() 所支持的數(shù)據(jù)類型事有限的，當需要傳遞自定義對象的時候就需要序列化。Serializable更簡單但是會把整個對象進行序列化因此效率比Parcelable低一些
2022-12-12
Android中Activity的生命周期探討
這篇文章主要介紹了Android中Activity的生命周期探討,本文同時講解了銷毀Activity、暫停與恢復、停止與重啟Activity等內容,需要的朋友可以參考下
2014-10-10
Android ListView實現(xiàn)下拉加載功能
這篇文章主要為大家詳細介紹了Android ListView實現(xiàn)下拉加載功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Android自定義控件如何在XML文件中使用自定義屬性
這篇文章主要為大家介紹了Android自定義控件之如何在XML文件中使用自定義屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04