Flutter 36: 圖解自定義 View 之 Canvas (三)

小菜繼續學習 Canvas 的相關方法：

drawVertices 繪制頂點

??????小菜上次沒有整理 drawVertices 的繪制方法，這次補上；Vertice 即頂點，通過繪制多個頂點，在進行連線，多用于 3D 模型中；

??????drawVertices 包括三個參數，第一個是頂點屬性，根據不同屬性線的連接方式也不同；第二個是混合模式，即線的顏色與背景色混合效果；第三個是畫筆，小菜測試調整 Paint 線的粗細無法調整整體連線的粗細；

??????小菜借用 A B C D E F G H I 頂點來簡單介紹：

1. VertexMode.triangles：每三個分割頂點相連，即 [A B C] [D E F] [G H I] 共 3 組；
2. VertexMode.triangleStrip：每相鄰的三個頂點相連，即 [A B C] [B C D] [C D E] [D E F] [E F G] [F G H] [G H I] 共 7 組；
3. VertexMode.triangleFan：每相鄰的兩個頂點與首點相連，即 [A B C] [A C D] [A D E] [A E F] [A F G] [A G H] [A H I] 共 7 組；

canvas.drawVertices(Vertices(VertexMode.triangles, [Offset(30, 30), Offset(30, 60),Offset(60, 60),Offset(90, 60), Offset(120, 60), Offset(120, 30),Offset(60, 90), Offset(60, 120), Offset(90, 120),]),BlendMode.colorBurn, Paint()..color = Colors.red);canvas.drawVertices(Vertices(VertexMode.triangleStrip, [Offset(210, 30), Offset(210, 60), Offset(240, 60),Offset(270, 60), Offset(300, 60), Offset(300, 30),Offset(240, 90), Offset(240, 120), Offset(270, 120),]),BlendMode.colorBurn, Paint()..color = Colors.green);canvas.drawVertices(Vertices(VertexMode.triangleFan, [Offset(120, 150), Offset(120, 180), Offset(150, 180),Offset(180, 180), Offset(210, 180), Offset(210, 150),Offset(150, 210), Offset(150, 240), Offset(180, 240),]),BlendMode.colorBurn, Paint()..color = Colors.blue);

畫布操作

??????小菜接下來介紹一下畫布的基本操作，與 Android 很相似；

scale 縮放

??????scale 即縮放效果，縮放的是畫布大小，可以設置縮放倍數，且縮放倍數會疊加；

canvas.drawRect(Rect.fromLTWH(60, 60, 90, 50),Paint()..color = Colors.red..strokeWidth = 2.0..style = PaintingStyle.stroke); // 縮放 canvas.scale(2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 縮放 canvas.scale(0.25); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke);

translate 平移

??????translate 即平移，平移的也是畫布，并非畫布中子元素，兩個參數分別為水平方向和豎直方向距離；

canvas.drawLine(Offset(0, 0), Offset(60, 60),Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 平移 canvas.translate(30, 90); canvas.drawLine( Offset(0, 0), Offset(0, Screen.height), Paint()..color = Colors.blueGrey..strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(Screen.width, 0), Paint()..color = Colors.blueGrey..strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0.style = PaintingStyle.stroke);

rotate 旋轉

??????rotate 即旋轉，原點為屏幕左上角，小菜為了效果先將畫布平移一部分到屏幕中間在進行旋轉測試，注意參數并非角度而是對應的 PI 值；

canvas.drawLine(Offset(0, 0), Offset(60, 60),Paint()..color = Colors.red..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.red ..strokeWidth = 2.0..style = PaintingStyle.stroke); // 以當前原點旋轉 90 度 canvas.rotate(degToRad(90)); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint()..color = Colors.green..strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint()..color = Colors.green ..strokeWidth = 2.0..style = PaintingStyle.stroke);

skew 斜切

??????skew 即斜切，兩個參數為水平方向和豎直方向切度值，值為三角函數中的 tan 值，即 45 度時 tan 值為 1；

canvas.drawRect(Rect.fromLTWH(60, 0, 90, 50),Paint()..color = Colors.red..strokeWidth = 2.0..style = PaintingStyle.stroke); // 水平方向斜近 30 度，豎直方向不變 canvas.skew(0.6, 0); canvas.drawRect( Rect.fromLTWH(60, 0, 90, 50), Paint()..color = Colors.green ..strokeWidth = 2.0..style = PaintingStyle.stroke);

save/restore 保存/恢復

??????save/savelayer 即保存當前畫布，restore 即恢復當前畫布，也可以理解為清空重新繪制；save/restore 可以多次，以棧的方式存儲，可以通過進棧/出棧到當具體某一層；但是小菜測試時發現與 save/restore 需要成對出現，否則回報不匹配異常；

canvas.clipRect(Rect.fromLTWH(40, 40, Screen.width - 80, Screen.width - 80));
canvas.drawColor(Colors.green, BlendMode.srcIn);
// 保存畫布1 canvas.save(); canvas.clipRect( Rect.fromLTWH(60, 60, Screen.width - 120, Screen.width - 120)); canvas.drawColor(Colors.grey, BlendMode.srcIn); // 保存畫布2 canvas.save(); canvas.clipRect( Rect.fromLTWH(80, 80, Screen.width - 160, Screen.width - 160)); canvas.drawColor(Colors.orange, BlendMode.srcIn); // canvas.save(); // 恢復畫布1 canvas.restore(); // 恢復畫布2 canvas.restore(); // canvas.restore(); canvas.drawColor(Colors.blue, BlendMode.srcIn);

---

??????Canvas 非常強大，還有很多研究不透徹的地方，小菜仍在不斷學習，有錯誤的地方煩請多多指點！