接著上一篇 《Flutter：成為Canvas繪制大師(一)》，本篇繼續(xù)講解 Canvas 中的常用繪制操作。
繪制圓形drawCircle()
繪制圓形。
?? e.g.:
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);
?? 效果：
設(shè)置空心效果 paint..style=PaintingStyle.stroke 。
?? 效果：
繪制橢圓形drawOval()
需要提供一個(gè) Rect，繪制的是 Rect 的內(nèi)接矩形。
?? e.g.:
Rect rect = Rect.fromLTRB(size.width / 2 - 100, size.height / 2 - 50,
size.width / 2 + 100, size.height / 2 + 50);
canvas.drawOval(rect, paint);
?? 效果：
設(shè)置空心效果 paint..style=PaintingStyle.stroke 。
?? 效果：
繪制圓弧drawArc()
繪制圓弧需要提供一個(gè) Rect，圓弧相當(dāng)于是 Rect 的內(nèi)接橢圓上的一段。
看下這個(gè)函數(shù)所需的參數(shù)：
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| rect | Rect | 圓弧所在橢圓的外接矩形 |
| startAngle | double | 起始位置的弧度?；《戎?/td> |
| sweepAngle | double | 設(shè)置圓弧掃過多少弧度?；《戎?/td> |
| useCenter | bool | 表示是否鏈接到圓弧所在橢圓的中心 |
| paint | Paint | 畫筆 |
?? e.g.:
Rect rect = Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 140);
canvas.drawArc(rect, 0, math.pi / 2, true, paint);
?? 效果：
?? 注意，圓弧的
startAngle和sweepAngle采用弧度制。參考：弧度制。
如果你想要獲得π值，可以通過 dart 的 math 包下的math.pi獲取。
下圖是圓弧的0點(diǎn)示意圖：
?? 當(dāng) useCenter=true 的效果：
繪制陰影drawShadow()
在 Flutter 中，使用該函數(shù)你可以很方便的繪制陰影。
看看該函數(shù)的參數(shù)：
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| path | Path | 繪制陰影的路徑 |
| color | Color | 陰影的顏色 |
| elevation | double | 陰影高度 |
| transparentOccluder | bool | 是否透明封堵器。通常需要設(shè)置為true |
?? e.g.:
Path path = Path()..addRect(rect.translate(20, 0));
canvas.drawShadow(path, Colors.amberAccent, 20, true);
你看，繪制 Shadow 不需要 Paint。
?? 效果：
什么？看不出來有什么用？
前面加個(gè)東西看看。
?? 效果：
看起來矩形漂浮起來了??。
繪制顏色drawColor()
Flutter 中的 drawColor() 是個(gè)比較不容易理解的繪制操作。
為什么呢？看看它的參數(shù)：
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| color | Color | 顏色 |
| blendMode | BlendMode | 色值混合模式。與此前繪制的內(nèi)容的混合。 |
主要就是因?yàn)榈诙€(gè)參數(shù) blendMode。
不同的值會(huì)有不同的表現(xiàn)。
在進(jìn)行混合的時(shí)候，有一個(gè)目標(biāo)色值 dst（調(diào)用drawColor()之前已經(jīng)繪制的內(nèi)容）和一個(gè)源色值 src（就是第一個(gè)參數(shù)的色值）。
混合就是，以不同的算法，根據(jù) dst 和 src 計(jì)算出新的色值。
?? e.g.:
canvas.drawColor(Colors.redAccent, BlendMode.src);
?? 效果：
由于在調(diào)用 drawColor() 之前沒有繪制過內(nèi)容，所以混合就是和背景進(jìn)行的。
可以看到，此時(shí)模式為 BlendMode.src 時(shí)，可以給整個(gè)畫布上顏色。
?? 如果此前已經(jīng)繪制了內(nèi)容：
加上如下代碼：
canvas.drawColor(Colors.redAccent, BlendMode.color);
?? 效果：
使用 BlendMode.color 模式就像給此前的繪制的內(nèi)容加了濾鏡 ??。
BlendMode 模式特別的多，可以參考官方的例子：BlendMode官方圖解
