实现
这部分我觉得不太好讲,全是数学几何相关的计算。当初开始写的extended_image的时候,就留意了一下可能会扩展的功能实现的可能性,代码之间也做好了铺垫。大家都问,功能能抽离出来吗? 我说不能,从开始基础就决定它将会拥有这些功能。简单提一下,图片的显示区域不等于图片的layout区域,它受BoxFix等参数的影响。而Flutter里面的 Transform是对整个layout区域起作用的,明显不符合我们的需求。所以从一开始我就放弃直接使用Transform对图片进行处理,直接通过算法在绘制图片的时候进行缩放,平移,旋转,翻转等操作。
使用
ExtendedImage 相关参数设置
EditorConfig 参数
裁剪框的宽高比
这是一个double类型,你可以自定义裁剪框的宽高比。 如果为null,那就没有宽高比限制。 如果小于等于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());
- 翻转,旋转,裁剪数据
- 将数据转为为图片的元数据 获取到的将是图片的元数据,你可以使用它来保存或者其他的一些用途
encodePng(cropData)