最近在學習中需要用到裁剪圖片，記錄一下解決方法
思路：
使用canvas的drawImageRect()方法，對Image進行裁剪，這里的Image需要 'dart:ui' 庫中的Image。
1. canvas的drawImageRect()方法
drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void
①第一個參數是'dart:ui' 庫中的Image。
②第二個參數為你需要截取的矩形Rect，舉個栗子：截取一張圖片，原圖的寬高分別為w和h，
將第二個參數設置為：
Rect.fromLTRB(0, 0, w/2, h/2)
意思就是從原圖片中截取一個矩形，矩形的坐標從(0.0)到（w/2, h/2)。
這里的是fromLTWH意思是指定left，top，right，bottom坐標，通過指定四個點來獲取矩形
③第三個為目標矩形Rect，即你想要在canvas上繪制的區域，
舉個栗子：接着上面所講的，將第三個參數設置為
Rect.fromLTWH(0, 0, 100, 100), paint);
意思就是將上面截取的矩形，在canvas的（0，0）坐標開始繪制，繪制的寬和高為100，
這里的是fromLTWH意思是指定left和top坐標，並設置寬高來獲取矩形
④第四個參數為畫筆。
2.'dart:ui' 庫中的Image
這里我們要引入'dart:ui' 取別名為ui，避免庫里的方法與'package:flutter/material.dart'中的方法重名沖突
import 'dart:ui' as ui;
從我們平常用的圖片去獲取ui庫下的Image的方法如下：
將圖片轉化為流，並添加監聽，在圖片流加載完成之后獲取到ui.Image
Future<ui.Image> imageLoader() {
ImageStream imageStream = NetworkImage(
'https://avatars0.githubusercontent.com/u/45789654?s=460&v=4')
.resolve(ImageConfiguration.empty);
Completer<ui.Image> imageCompleter = Completer<ui.Image>();
void imageListener(ImageInfo info, bool synchronousCall) {
ui.Image image = info.image;
imageCompleter.complete(image);
imageStream.removeListener(imageListener);
}
imageStream.addListener(imageListener);
return imageCompleter.future;
}
clip() async {
ui.Image _image;
imageLoader().then((image) => _image = image).whenComplete(() {
clipper = ImageClipper(_image,left: 0,top: 0,right: 0.5,bottom: 0.5);
setState(() {});
});
}
通過clip()方法得到ImageClipper對象，並且setState通知界面更新Container的內容，
Container(color: Colors.green,child: CustomPaint(painter: clipper,size: Size(50, 50),)),
ImageClipper中的核心方法
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
canvas.drawImageRect(_image, Rect.fromLTRB(_image.width*left, _image.height*top, _image.width*right, _image.height*bottom),
Rect.fromLTWH(0, 0, size.width, size.height), paint);
}