Flutter 图片裁剪旋转翻转编辑器

1,617 阅读2分钟

实现

这部分我觉得不太好讲,全是数学几何相关的计算。当初开始写的extended_image的时候,就留意了一下可能会扩展的功能实现的可能性,代码之间也做好了铺垫。大家都问,功能能抽离出来吗? 我说不能,从开始基础就决定它将会拥有这些功能。简单提一下,图片的显示区域不等于图片的layout区域,它受BoxFix等参数的影响。而Flutter里面的 Transform是对整个layout区域起作用的,明显不符合我们的需求。所以从一开始我就放弃直接使用Transform对图片进行处理,直接通过算法在绘制图片的时候进行缩放,平移,旋转,翻转等操作。

Flutter 图片裁剪旋转翻转编辑器

使用

ExtendedImage 相关参数设置

Flutter 图片裁剪旋转翻转编辑器

EditorConfig 参数

Flutter 图片裁剪旋转翻转编辑器

裁剪框的宽高比

这是一个double类型,你可以自定义裁剪框的宽高比。 如果为null,那就没有宽高比限制。 如果小于等于0,宽高比等于图片的宽高比。 下面是一些定义好了的宽高比

Flutter 图片裁剪旋转翻转编辑器

旋转,翻转,重置

  • 定义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();

Flutter 图片裁剪旋转翻转编辑器

裁剪数据

  • 添加 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());
  • 翻转,旋转,裁剪数据
Flutter 图片裁剪旋转翻转编辑器

  • 将数据转为为图片的元数据 获取到的将是图片的元数据,你可以使用它来保存或者其他的一些用途
 encodePng(cropData)
来源:安卓巴士 了解更多去安卓巴士吧