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

最新推荐文章于 2025-03-10 11:51:13 发布

Android架构师丨小熊

最新推荐文章于 2025-03-10 11:51:13 发布

阅读量3k

点赞数 3

分类专栏：移动互联网 Android程序员 Android开发文章标签： Android

本文链接：https://blog.csdn.net/weixin_45365889/article/details/100740115

版权

本文介绍了如何在Flutter中实现图片裁剪、旋转和翻转功能。作者强调由于Transform对整个layout区域的影响不适合直接用于图片处理，因此通过算法在绘制时进行操作。使用ExtendedImage库，并详细说明了裁剪框宽高比设置、EditorConfig参数、旋转与翻转的操作方法，以及如何获取并处理裁剪后的图片数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现

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

使用

    ExtendedImage.network(
      imageTestUrl,
      fit: BoxFit.contain,
      mode: ExtendedImageMode.editor,
      extendedImageEditorKey: editorKey,
      initEditorConfigHandler: (state) {
        return EditorConfig(
            maxScale: 8.0,
            cropRectPadding: EdgeInsets.all(20.0),