用Flutter實現一個塗鴉和加水印功能

本文涉及的知識點：截圖、圖片保存、根據用戶手勢實時繪製canvas。

GitHub地址：https://github.com/yumi0629/FlutterUI/tree/master/lib/scrawl

先上效果圖：

 

 

需求分析

  這次的想法是移植自項目中的一個小功能：截屏當前頁面，添加塗鴉功能後，分享給第三方APP。分享功能我們暫不討論，使用插件可以輕鬆完成，重點是截屏+塗鴉+圖片保存。
  具體實現思路是：截取當前屏幕內容，保存至APP緩存目錄，塗鴉頁面再去讀取文件，依然是使用CustomerPaint實現根據用戶手勢實時繪製，最後將用戶塗鴉部分與原圖片組合保存至本地。給圖片加水印的實現其實就是截屏，因爲截取當前屏幕內容實際上也是將Widget轉化爲byteData再轉化爲File的過程。

截屏並保存

  Flutter提供了一個RepaintBoundaryWidget來實現截圖的功能，用RepaintBoundary包裹需要截取的部分，RenderRepaintBoundary可以將RepaintBoundary包裹的部分截取出來；然後通過boundary.toImage()方法轉化爲ui.Image對象，再使用image.toByteData()將image轉化爲byteData；最後通過File().writeAsBytes()存儲爲文件對象：

RepaintBoundary(
                  key: _repaintKey,
                  child: Stack(
                    alignment: Alignment.bottomRight,
                    children: <Widget>[
                      Image.asset(
                        'images/food01.jpeg',
                        fit: BoxFit.cover,
                      ),
                      Icon(Icons.translate,),
                    ],
                  ),
                )

RenderRepaintBoundary boundary =
                    _repaintKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File(tempPath).writeAsBytes(pngBytes);

  需要注意的地方：

• 記住給RepaintBoundary添加一個key，因爲我們需要通過這個key來找到當前的RenderObject，生成一個RenderRepaintBoundary對象；
• image.toByteData(format: format)可以自定義存儲格式，一般圖片爲png格式，但是要注意，如果你的RepaintBoundary包裹的部分沒有設置背景色，那麼存儲出來的圖片可能會有背景色缺失的問題，boundary.toImage()並不會自動添加一個你想要的白色背景，這種情況在截取Text的時候會尤其明顯。

Flutter中獲取存儲路徑

  我們可以通過官方插件path_provider來獲取APP的內部和外部存儲路徑：

• Directory tempDir = await getTemporaryDirectory()，等同於iOS中的NSCachesDirectoryAPI和Android中的getCacheDirAPI；
• Directory externalDir = await getExternalStorageDirectory()，不支持iOS（會拋出UnsupportedError），等同於Android中的getExternalStorageDirectoryAPI；
• Directory applicationDir = await getApplicationDocumentsDirectory()，等同於iOS中的NSDocumentsDirectoryAPI和Android中的AppData目錄；

  要注意的是getExternalStorageDirectory()方法，大多數情況下是訪問SDCard路徑，因此即使在Android中調用，也要注意權限問題，推薦使用permission_handler插件。   還有就是存儲文件的時候要養成一個好習慣，先判斷下父目錄是否存在：

void _saveImage(Uint8List uint8List, Directory dir, String fileName) async {
  bool isDirExist = await Directory(dir.path).exists();
  if (!isDirExist) Directory(dir.path).create();
  ······
  File(tempPath).writeAsBytes(uint8List);
}

塗鴉

  通過GestureDetector包裹需要繪製的區域，收集用戶的手勢路徑信息，通過canvas.drawLine()方法來繪製路徑：

List<Offset> points = [];

GestureDetector(
          onPanStart: (details) {
          },
          onPanUpdate: (details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
                referenceBox.globalToLocal(details.globalPosition);
            state(() {
              points.add(localPosition);
            });
          },
          onPanEnd: (details) {
          },
        )

for (int i = 0; i < points.length - 1; i++) {
        if (points[i] != null && points[i + 1] != null)
          canvas.drawLine(points[i], points[i + 1], _linePaint);
      }

  爲什麼不直接用canvas.drawPoints()方法呢？ 
  即使將PointMode設置爲PointMode.lines，你會發現，繪製出來的點集合並不是無縫連接在一起的，看起來就像是虛線一樣：

 

    如果使用```PointMode.polygon```，確實可以繪製連續的曲線，但是有兩個缺點：一是繪製不如drawLine流暢，延遲會大一點，因爲暫時的實現方式是用戶手指每動一次都會重繪一次，消耗比較大；二是繪製出來的線條不如直接繪製line來得圓潤。我之前沒有深度考慮drawPoints的一個原因就是延遲太大。以後如果能找到更好的刷新機制，我會嘗試使用drawPoints來繪製的。  

    因此我們還是使用drawLine()強行將所有點連接起來。
  用戶繪製完成後，依然是使用RepaintBoundary來保存圖片就可以啦～～～