Android Flutter利用CustomPaint繪製基本圖形詳解

2022-07-05 22:01:17

上一篇我們介紹了 CustomPaint 的基本概念和使用，可以看到 CustomPaint 其實和前端的 Canvas基本上是一樣的，實際上前端 Canvas 支援的繪製方法 CustomPaint 都支援，畢竟 CustomPaint 其實也是基於 Canvas 實現的。本篇我們來介紹 CustomPaint 基本圖形的繪製。

繪製矩形

繪製矩形比較簡單，方法定義如下：

void drawRect(Rect rect, Paint paint)

其中 rect 為要繪製矩形，paint 即畫筆設定物件。比如我們要水平居中繪製一個寬度200 x 120的矩形，可以使用如下程式碼：

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
var center = size / 2;
// 繪製矩形
var paint = Paint()..color = Color(0xFF2080E5);
paint.strokeWidth = 2.0;
canvas.drawRect(
  Rect.fromLTWH(center.width - 100, 60, 200, 120),
  paint,
);

paint 預設是實心填充的，如果要空閒填充，設定paint 物件的style 屬性為 PaintingStyle.stroke 即可。

繪製圓形

繪製圓形上一篇有介紹過，和繪製矩形類似，只是傳入的引數是圓心位置，半徑和 paint 物件。

canvas.drawCircle(
  Offset(center.width - 80, 240),
  40,
  paint,
);

繪製橢圓

橢圓的尺寸是通過外接的矩形約束的，呼叫形式和繪製矩形相同。

canvas.drawOval(
  Rect.fromLTWH(center.width, 200, 120, 80),
  paint,
);

繪製任意形狀

繪製任意形狀通過 drawPath 實現，將所需要繪製的形狀路徑使用 Path 物件構建即可。以畫一個等邊三角形為例，我們確定三個頂點的位置後，使用 Path 物件的 lineTo 方法將三個頂點連線起來即可。下面是實現程式碼。

// 使用 Path繪製三角形
Path trianglePath = Path();
// 空心繪製
paint.style = PaintingStyle.stroke;
trianglePath.moveTo(center.width - 30, 300);
trianglePath.lineTo(center.width + 30, 300);
trianglePath.lineTo(center.width, 352);
trianglePath.lineTo(center.width - 30, 300);
canvas.drawPath(trianglePath, paint);

繪製弧形

繪製弧形實際也是通過繪製橢圓實現的，只是通過控制繪製的角度來控制弧形繪製的範圍。繪製弧形的方法定義如下：

void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

其中 rect 就是橢圓尺寸的約束矩形，startAngle 是起始角度，sweepAngle 是繪製的角度範圍。useCenter 表示是否到矩形中心點閉合，預設為 true。即按順時針方向。預設是從中心點到對應起始角度的點連直線繪製完指定角度範圍後再通過連線直線回到中心點。如果 useCenter 為 false，那麼就直接按弧線的起止點閉合，而不會回到中心點。下面是兩種繪製的區別，左邊是 useCenter 為 false，右邊是 useCenter 為 true，其他引數都相同。

下面的程式碼是繪製弧形的範例程式碼：

canvas.drawArc(
  Rect.fromLTWH(center.width - 60, 340, 120, 80),
  0,
  pi / 2,
  false,
  paint,
);

總結

本篇介紹了 CustomPaint 繪製基本圖形的方法和範例，實際上 Flutter 的 Canvas 提供了很多其他繪製圖形的方法，如繪製線條，繪製圓角矩形，繪製文字等等，有興趣的可以參考官網的說明檔案檢視各個方法的使用。有了繪製基本圖形的基礎，我們就可以繪製一些有趣的圖形了 —— UI 小姐姐交代的任務還沒完成呢！

到此這篇關於Android Flutter利用CustomPaint繪製基本圖形詳解的文章就介紹到這了,更多相關Flutter CustomPaint繪製圖形內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！