extended_image 相關文章
圖片編輯這個功能很早之前就想把它給做了，畢竟是做的全家桶，少一個功能都覺得不舒服。最近自己一個人在家，週末瘋狂寫了2天程式碼，睡覺都在思考，
實現
這部分我覺得不太好講，全是數學幾何相關的計算。當初開始寫的extended_image的時候，就留意了一下可能會擴充套件的功能實現的可能性，程式碼之間也做好了鋪墊。大家都問，功能能抽離出來嗎？ 我說不能，從開始基礎就決定它將會擁有這些功能。簡單提一下，圖片的顯示區域不等於圖片的layout區域，它受BoxFix等引數的影響。而Flutter裡面的 Transform是對整個layout區域起作用的，明顯不符合我們的需求。所以從一開始我就放棄直接使用Transform對圖片進行處理，而且通過演算法在繪製圖片的時候進行縮放，平移，旋轉，翻轉等操作。
Rome is not built in one day，extended_image從今年2月份開始編寫的，到9月份最終成為各種常用實用功能的圖片全家桶。 如果對實現感興趣的小夥伴，可以先看看原始碼，如果有不清楚的，可以加群(QQ群:181398081)詢問。
使用
ExtendedImage.network(
imageTestUrl,
fit: BoxFit.contain,
mode: ExtendedImageMode.editor,
extendedImageEditorKey: editorKey,
initEditorConfigHandler: (state) {
return EditorConfig(
maxScale: 8.0,
cropRectPadding: EdgeInsets.all(20.0),
hitTestSize: 20.0,
cropAspectRatio: _aspectRatio.aspectRatio);
},
);
複製程式碼ExtendedImage 相關引數設定
| 引數 | 描述 | 預設 |
|---|---|---|
| mode | 圖片模式，預設/手勢/編輯 (none,gestrue,editor) | none |
| initGestureConfigHandler | 編輯器配置的回撥(圖片載入完成時).你可以根據圖片的資訊比如寬高，來初始化 | - |
| extendedImageEditorKey | key of ExtendedImageEditorState 用於裁剪旋轉翻轉 | - |
EditorConfig 引數
| 引數 | 描述 | 預設 |
|---|---|---|
| maxScale | 最大的縮放倍數 | 5.0 |
| cropRectPadding | 裁剪框跟圖片layout區域之間的距離。最好是保持一定距離，不然裁剪框邊界很難進行拖拽 | EdgeInsets.all(20.0) |
| cornerSize | 裁剪框四角圖形的大小 | Size(30.0, 5.0) |
| cornerColor | 裁剪框四角圖形的顏色 | primaryColor |
| lineColor | 裁剪框線的顏色 | scaffoldBackgroundColor.withOpacity(0.7) |
| lineHeight | 裁剪框線的高度 | 0.6 |
| eidtorMaskColorHandler | 蒙層的顏色回撥，你可以根據是否手指按下來設定不同的蒙層顏色 | scaffoldBackgroundColor.withOpacity(pointerdown ? 0.4 : 0.8) |
| hitTestSize | 裁剪框四角以及邊線能夠拖拽的區域的大小 | 20.0 |
| animationDuration | 當裁剪框拖拽變化結束之後，自動適應到中間的動畫的時長 | Duration(milliseconds: 200) |
| tickerDuration | 當裁剪框拖拽變化結束之後，多少時間才觸發自動適應到中間的動畫 | Duration(milliseconds: 400) |
| cropAspectRatio | 裁剪框的寬高比 | null(無寬高比)) |
裁剪框的寬高比
這是一個double型別，你可以自定義裁剪框的寬高比。 如果為null，那就沒有寬高比限制。 如果小於等於0，寬高比等於圖片的寬高比。 下面是一些定義好了的寬高比
class CropAspectRatios {
/// no aspect ratio for crop
static const double custom = null;
/// the same as aspect ratio of image
/// [cropAspectRatio] is not more than 0.0, it's original
static const double original = 0.0;
/// ratio of width and height is 1 : 1
static const double ratio1_1 = 1.0;
/// ratio of width and height is 3 : 4
static const double ratio3_4 = 3.0 / 4.0;
/// ratio of width and height is 4 : 3
static const double ratio4_3 = 4.0 / 3.0;
/// ratio of width and height is 9 : 16
static const double ratio9_16 = 9.0 / 16.0;
/// ratio of width and height is 16 : 9
static const double ratio16_9 = 16.0 / 9.0;
}
複製程式碼旋轉,翻轉,重置
- 定義key，以方便操作ExtendedImageEditorState
final GlobalKey<ExtendedImageEditorState> editorKey =GlobalKey<ExtendedImageEditorState>();
- 順時針旋轉90°
editorKey.currentState.rotate(right: true);
- 逆時針旋轉90°
editorKey.currentState.rotate(right: false);
- 翻轉(映象)
editorKey.currentState.flip();
- 重置
editorKey.currentState.reset();
裁剪資料
新增 image 庫到 pubspec.yaml, 它是用來裁剪/旋轉/翻轉圖片資料的
dependencies:
image: any
複製程式碼- 從ExtendedImageEditorState中獲取裁剪區域以及圖片資料
var cropRect = editorKey.currentState.getCropRect();
ui.Image imageData = editorKey.currentState.image;
複製程式碼- 將flutter的圖片資料轉換為image庫的資料
var data = await imageData.toByteData(format: ui.ImageByteFormat.png);
image.Image src = decodePng(data.buffer.asUint8List());
複製程式碼- 翻轉，旋轉，裁剪資料
if (editorKey.currentState.editAction.hasEditAction) {
var editAction = editorKey.currentState.editAction;
src = copyFlip(src, flipX: editAction.flipX, flipY: editAction.flipY);
if (editAction.hasRotateAngle) {
double angle = (editAction.rotateAngle ~/ (pi / 2)) * 90.0;
src = copyRotate(src, angle);
}
}
var cropData = copyCrop(src, cropRect.left.toInt(), cropRect.top.toInt(),
cropRect.width.toInt(), cropRect.height.toInt());
複製程式碼- 將資料轉為為圖片的後設資料 獲取到的將是圖片的後設資料，你可以使用它來儲存或者其他的一些用途
encodePng(cropData)
複製程式碼結語
時間過得真快，搞弄flutter也快要1年了，認識不少朋友，大家在一起互相學習，促進的感覺真好。歡迎加入Flutter Candies，一起生產可愛的Flutter小糖果(QQ群:181398081)
最最後放上Flutter Candies全家桶，真香。
