Android?Flutter利用CustomPaint繪制基本圖形的方法

今天小編給大家分享一下Android Flutter利用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 即可。

繪制圓形

繪制圓形上一篇有介紹過，和繪制矩形類似，只是傳入的參數(shù)是圓心位置，半徑和 paint 對象。

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

繪制橢圓

橢圓的尺寸是通過外接的矩形約束的，調用形式和繪制矩形相同。

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

繪制任意形狀

繪制任意形狀通過 drawPath 實現(xiàn)，將所需要繪制的形狀路徑 使用 Path 對象構建即可。以畫一個等邊三角形為例，我們確定三個頂點的位置后，使用 Path 對象的 lineTo 方法將三個頂點連接起來即可。下面是實現(xiàn)代碼。

// 使用 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);

繪制弧形

繪制弧形實際也是通過繪制橢圓實現(xiàn)的，只是通過控制繪制的角度來控制弧形繪制的范圍。繪制弧形的方法定義如下：

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

其中 rect 就是橢圓尺寸的約束矩形，startAngle 是起始角度，sweepAngle 是繪制的角度范圍。useCenter 表示是否到矩形中心點閉合，默認為 true。即按順時針方向。默認是從中心點到對應起始角度的點連直線繪制完指定角度范圍后再通過連接直線回到中心點。如果 useCenter 為 false，那么就直接按弧線的起止點閉合，而不會回到中心點。下面是兩種繪制的區(qū)別，左邊是 useCenter 為 false，右邊是 useCenter 為 true，其他參數(shù)都相同。

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

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

以上就是“Android Flutter利用CustomPaint繪制基本圖形的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。