上一篇我們介紹了 CustomPaint 的基本概念和使用，可以看到 CustomPaint 其實和 前端的 Canvas基本上是一樣的，實際上前端 Canvas 支持的繪制方法 CustomPaint 都支持，畢竟 CustomPaint 其實也是基于 Canvas 實現(xiàn)的。本篇我們來介紹 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,
);

總結

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

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

最新評論