上一篇我們介紹了 CustomPaint 的基本概念和使用，可以看到 CustomPaint 其實(shí)和 前端的 Canvas基本上是一樣的，實(shí)際上前端 Canvas 支持的繪制方法 CustomPaint 都支持，畢竟 CustomPaint 其實(shí)也是基于 Canvas 實(shí)現(xiàn)的。本篇我們來(lái)介紹 CustomPaint 基本圖形的繪制。

繪制矩形

繪制矩形比較簡(jiǎn)單，方法定義如下：

void?drawRect(Rect?rect,?Paint?paint)

其中 rect 為要繪制矩形，paint 即畫(huà)筆配置對(duì)象。比如我們要水平居中繪制一個(gè)寬度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 默認(rèn)是實(shí)心填充的，如果要空閑填充，設(shè)置paint 對(duì)象的style 屬性 為 PaintingStyle.stroke 即可。

繪制圓形

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

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

繪制橢圓

橢圓的尺寸是通過(guò)外接的矩形約束的，調(diào)用形式和繪制矩形相同。

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

繪制任意形狀

繪制任意形狀通過(guò) drawPath 實(shí)現(xiàn)，將所需要繪制的形狀路徑 使用 Path 對(duì)象構(gòu)建即可。以畫(huà)一個(gè)等邊三角形為例，我們確定三個(gè)頂點(diǎn)的位置后，使用 Path 對(duì)象的 lineTo 方法將三個(gè)頂點(diǎn)連接起來(lái)即可。下面是實(shí)現(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);

繪制弧形

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

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

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

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

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

總結(jié)

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

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

最新評(píng)論