通過(guò)前面 3 篇：
相信你已經(jīng)掌握了 Flutter 中繪制基礎(chǔ)圖形的操作，本篇將會(huì)講解 Canvas 的變換操作。
save()、saveLayer() 和 restore()
在開始了解 Canvas 的變換操作時(shí)，先看看 Canvas 的 save()、saveLayer() 和 restore()。
在進(jìn)行變換操作時(shí)，你經(jīng)常會(huì)需要用到它們。
save()
save() 操作會(huì)保存此前的所有繪制內(nèi)容和 Canvas 狀態(tài)。
在調(diào)用該函數(shù)之后的繪制操作和變換操作，會(huì)重新記錄。
當(dāng)你調(diào)用 restore() 之后，會(huì)把 save() 到 restore() 之間所進(jìn)行的操作與之前的內(nèi)容進(jìn)行合并。
?? 注意，
save()并不會(huì)創(chuàng)建新的圖層，和saveLayer()是不同的。
saveLayer()
saveLayer() 在大多數(shù)情況下看起來(lái)和 save() 的效果是差不多的。
不同的是 saveLayer() 會(huì)創(chuàng)建一個(gè)新的圖層。
在 saveLayer() 到 restore() 之間的操作，是在新的圖層上進(jìn)行的，雖然最終它們還是會(huì)合成到一起。
看看 saveLayer() 的兩個(gè)參數(shù)：
-
rect
Rect，用于設(shè)置新圖層的范圍區(qū)域。
你的繪制操作只有在這個(gè)區(qū)域內(nèi)才會(huì)有效，超過(guò)這個(gè)區(qū)域的部分會(huì)被忽略。
?? e.g.：
canvas.saveLayer(Rect.fromCircle( center: Offset(size.width / 2, size.height / 2), radius: 100), paint); // 用顏色填充整個(gè)繪制區(qū)域 canvas.drawPaint(Paint()..color = Colors.blue); // 在繪制區(qū)域以外繪制一個(gè)矩形 canvas.drawRect(Rect.fromLTWH(0, 0, 100, 100), Paint()..color = Colors.red); canvas.restore();?? 效果：
image從這個(gè)例子中可以看到，新圖層的繪制內(nèi)容被限制在了 rect 范圍內(nèi)。
-
paint
Paint，其
ColorFilters和BlendMode配置會(huì)在圖層合成的時(shí)候生效。其中，前面的圖層為 dst，本圖層為 src 。
?? e.g.：
canvas.saveLayer(Rect.fromCircle( center: Offset(size.width / 2, size.height / 2), radius: 60), Paint()..color = Colors.red); canvas.drawPaint(Paint()..color = Colors.amber); canvas.restore();?? 效果：
image前面的圖層繪制了一張圖片，在新圖層中，繪制了一個(gè)矩形。
如果 Paint 沒有設(shè)置混合參數(shù)，新圖層就相當(dāng)于僅僅是蓋在了前面的圖層之上。
?? 注意，在傳入的 Paint 必須設(shè)置過(guò) color，否則你設(shè)置的 rect 范圍限制將會(huì)失效！
如果將 Paint 設(shè)置 BlendMode 混合模式，再看看效果。
canvas.saveLayer(Rect.fromCircle( center: Offset(size.width / 2, size.height / 2), radius: 60), Paint() ..color=Colors.red ..blendMode=BlendMode.exclusion);?? 效果：
image可以看到，新的圖層和之前的內(nèi)容的像素進(jìn)行了混合。
?? 提示，BlendMode 的支持的所有混合效果，可以參考：BlendMode API。
restore()
讀到這，相信你對(duì) restore() 也不會(huì)陌生了。
在調(diào)用 save() 或者 saveLayer() 必須調(diào)用 restore() 來(lái)合成，否則 Flutter 會(huì)拋出異常。
值得注意的是，每一個(gè) save() 或者 saveLayer() 都必須有一個(gè)對(duì)應(yīng)的 restore()。
?? e.g.：
// save-1
canvas.save();
...
// save-2
canvas.saveLayer(dstRect, paint);
...
// save-3
canvas.saveLayer(dstRect, paint);
...
// restore-3
canvas.restore();
// restore-2
canvas.restore();
// restore-1
canvas.restore();
restore() 是從離它最近的 save() 或者 saveLayer() 操作開始合成。
?? 注意，Canvas 的變化操作需要放到
save()或者saveLayer()到restore()之間，否則你很難得到想要的效果。
平移畫布translate()
translate() 用于將畫布相對(duì)于原來(lái)的位置，平移指定的距離。
下面看個(gè)例子 ??。
先在畫布中畫一張圖：
canvas.drawImage(background, Offset.zero, paint);
?? 效果：
現(xiàn)在，將畫布平移：
canvas.save();
// 平移畫布
canvas.translate(100, 100);
canvas.drawImage(background, Offset.zero, paint);
canvas.restore();
?? 效果：
繪制圖片的邏輯不變，但經(jīng)過(guò)平移后，圖片的位置發(fā)生了變化。
縮放畫布scale()
scale() 用于將畫布進(jìn)行縮放。
直接看例子 ??。
先畫一個(gè)充滿畫布的矩形：
canvas.drawRect(Offset.zero & size, Paint()..color=Colors.pinkAccent);
?? 效果：
現(xiàn)在，將畫布進(jìn)行縮放：
canvas.save();
canvas.scale(0.5);
canvas.drawRect(Offset.zero & size, Paint()..color=Colors.pinkAccent);
canvas.restore();
?? 效果：
將畫布縮小一半后，可以看到原來(lái)的矩形也縮小了一半。
旋轉(zhuǎn)畫布rotate()
rotate() 用于旋轉(zhuǎn)畫布。
看著例子 ?? 來(lái)理解它的用法。
先在畫布的中心位置畫一個(gè)矩形：
canvas.drawRect(Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 100), Paint()..color = Colors.amber);
?? 效果：
現(xiàn)在，旋轉(zhuǎn)45度：
canvas.save();
canvas.rotate(pi/4);
canvas.drawRect(Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 100), Paint()..color = Colors.amber);
canvas.restore();
?? 效果：
看效果圖，會(huì)發(fā)現(xiàn)，矩形確實(shí)是旋轉(zhuǎn)了，但是旋轉(zhuǎn)的有點(diǎn)怪 ??。
這是因?yàn)?，Canvas 的旋轉(zhuǎn)中心是在畫布的左上角，所以得到的結(jié)果不是想要的。
如何獲得預(yù)期的中心旋轉(zhuǎn)效果呢？
你需要移動(dòng)畫布，讓繞左上角旋轉(zhuǎn)的畫布看起來(lái)像中心旋轉(zhuǎn)一樣。
那么重點(diǎn)就是，如何確定畫布需要移動(dòng)多少偏移量呢？
首先，看看在旋轉(zhuǎn)過(guò)程中，畫布的中心位置是如何變化的吧：
??提示，Canvas 的正向旋轉(zhuǎn)方向?yàn)轫槙r(shí)針?lè)较?，?0 弧度在圖中 x 軸正方向上。
從圖中可以看到，當(dāng)畫布圍繞左上角旋轉(zhuǎn)時(shí)，畫布的中心點(diǎn)始終在以 左上角為圓心，畫布對(duì)角線的一半 為半徑的圓上移動(dòng)。
畫布需要移動(dòng)的偏移量實(shí)際上就是 圓上各點(diǎn)（旋轉(zhuǎn)后的畫布中心點(diǎn)） 到畫布 初始中心點(diǎn) 的距離的一半。
那么這個(gè)問(wèn)題就被轉(zhuǎn)化為了：求圓上兩點(diǎn)之間的距離的問(wèn)題。
現(xiàn)在，來(lái)解決它吧 ??！
現(xiàn)在的已知條件只有：畫布的尺寸，size。
但這就夠了。
1.計(jì)算畫布 初始中心點(diǎn) 的坐標(biāo)。
求圓上某點(diǎn)的坐標(biāo)，可以通過(guò)以下公式計(jì)算：
x = x0 + r * cos(??)
y = y0 + r * sin(??)
因?yàn)閳A心為畫布左上角，即 (0, 0) 點(diǎn)，所以可以簡(jiǎn)化為：
x = r * cos(??)
y = r * sin(??)
顯然，要計(jì)算畫布 初始中心點(diǎn) 的坐標(biāo)，先要計(jì)算中心點(diǎn)軌跡圓的半徑，以及該點(diǎn)所在弧度。
根據(jù) 勾股定理 很容易計(jì)算出中心點(diǎn)軌跡圓的半徑：
double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
根據(jù) 反正弦函數(shù)，可以計(jì)算出 初始中心點(diǎn) 的弧度：
double startAngle = atan(size.height / size.width);
現(xiàn)在，就可以很輕松的求解出畫布 初始中心點(diǎn) 的坐標(biāo)：
double x0 = r * cos(startAngle);
double y0 = r * sin(startAngle);
Point p0 = Point(x0, y0);
2.計(jì)算旋轉(zhuǎn)后的畫布的中心點(diǎn)坐標(biāo)
回顧一下上面的圖，當(dāng)畫布旋轉(zhuǎn) ?? 弧度后，其中心點(diǎn)所在的弧度為 ?? + 畫布初始中心點(diǎn)的弧度，則：
double realAngle = xAngle + startAngle;
獲得了中心點(diǎn)的角度，那計(jì)算它的坐標(biāo)也就輕而易舉了：
Point px = Point(r * cos(realAngle), r * sin(realAngle));
3.平移畫布
現(xiàn)在，我們獲得了畫布 初始中心點(diǎn) 的坐標(biāo)和畫布旋轉(zhuǎn)后的中心點(diǎn)坐標(biāo)，就可以知道畫布應(yīng)該平移多少了：
canvas.translate((p0.x - px.x)/2, (p0.y - px.y)/2);
4.完整代碼
把上面的代碼，帶入剛剛的旋轉(zhuǎn)操作中：
canvas.save();
// 計(jì)算畫布中心軌跡圓半徑
double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
// 計(jì)算畫布中心點(diǎn)初始弧度
double startAngle = atan(size.height / size.width);
// 計(jì)算畫布初始中心點(diǎn)坐標(biāo)
Point p0 = Point(r * cos(startAngle), r * sin(startAngle));
// 需要旋轉(zhuǎn)的弧度
double xAngle = pi / 4;
// 計(jì)算旋轉(zhuǎn)后的畫布中心點(diǎn)坐標(biāo)
Point px = Point(
r * cos(xAngle + startAngle), r * sin(xAngle + startAngle));
// 先平移畫布
canvas.translate((p0.x - px.x) / 2, (p0.y - px.y) / 2);
// 后旋轉(zhuǎn)
canvas.rotate(xAngle);
canvas.drawRect(Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 100), Paint()
..color = Colors.amber);
canvas.restore();
?? 效果：
??提示，rotate() 是以弧度制進(jìn)行的。
斜切畫布skew()
skew() 用于斜切畫布，它有兩個(gè)參數(shù)，第一個(gè)表示水平方向的斜切，第二個(gè)表示垂直方向的斜切，斜切值是正弦函數(shù) tan 值。
比如，斜切 45 度，即 tan(pi/4) = 1。
看例子 ??。
先在畫布中心位置畫一張圖片：
canvas.drawImageRect(background, Offset.zero & imgSize,
Alignment.center.inscribe(imgSize, Offset.zero & size), paint);
?? 效果：
進(jìn)行斜切操作：
canvas.save();
canvas.skew(0.2, 0);
canvas.drawImageRect(background, Offset.zero & imgSize,
Alignment.center.inscribe(imgSize, Offset.zero & size), paint);
canvas.restore();
?? 效果：
效果還是比較明顯的 ??。
