Flutter 之图像旋转，而非你认为的 Widget 旋转

🌹 ⭐️ 🌹请首先看我 🌹 ⭐️ 🌹

1. 下面介绍的功能都是有 iimage 库提供。
2. 下面该功能需要 iimage ^ 0.0.2 以及以上可以使用。
3. iimage 包的引入方式如下: 1. 可以手动引入 idkit 包，就是将 iimage ^ 0.0.2 放在项目的 pubspec.yaml 文件的 dependencies 模块下，然后执行 flutter pub get 指令即可。 2. 可以使用后指令 flutter pub add iimage 在项目根目录终端下执行即可。

[》跳过拾光记忆]

拾光记忆

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现单选、多选功能，无需你对数据处理。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。 推荐: ⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现多种样式的轨道滑块，比如:轨道渐变色、触控笔悬浮标等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的查看日志，通过日志能够分析变量当前数值以及业务逻辑走势，同时也能作为日志收集日志文本。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 这是让开发者更加便捷的实现图像添加图片类型的水印和文字类型的水印，支持水印多种样式的设定。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: IImage 是 IDKit 的其中一个功能模块，它提供了许多方便的图像处理方法，例如：尺寸调整、相对某点的矩形位置、大小调整、图像缩放、背景去除、真实内容尺寸获取以及真实内容图像获取等等。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Matrix4 的 16 个参数的含义。 推荐: ⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Flutter 中所有颜色的模式以及对应颜色的一些便捷方法有和LAB 颜色的支持以及颜色差异提供算法。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Flutter 中如何实现图像的油漆桶、填充功能或者图像泛洪算法。 推荐: ⭐️⭐️⭐️⭐️⭐️

简介: 该篇主要介绍 Flutter 中如何实现图像的镜像功能以及实现原理的介绍。 推荐: ⭐️⭐️⭐️⭐️⭐️

[返回拾光记忆《]

一、简述

现在许多图像编辑软件中都支持图像的旋转，而大部分软件都是通过旋转组件来实现的，而这样的实现只是视觉上的欺骗，图像并没有旋转还是原始图像。需求:如果图像旋转 90° 后将图像像素坐标为偶数的像素设置白色。这样的需求那种通过组件旋转图像旋转就不容易实现了。Flutter 中IImage 库提供了图像的旋转的方法，图像旋转后可以直接进行其他的处理。

二、IImage 图像旋转

IImage 库提供了两种方法来实现图像的旋转，开发者可根据业务选择不同的方法，两种方法如下:

• Future<Image> rotateFromUint32List({ required Uint32List uint32list, required int imageWidth, required int imageHeight, RotateType rotateType = RotateType.none, PixelFormat pixelFormat = PixelFormat.rgba8888, })

  该方法是将图像的像素集合(Uint32List) 进行旋转，然后返回一个 Future 类型的对象。该方法是异步的；下面是该方参数的介绍:

  • uint32list ： 图像的像素集合，而不是图像的二进制转化的 Uint32List 集合。
  • imageWidth & imageWidth : 要旋转图像的宽与高。
  • rotateType ：图像像素集合旋转的类型。具体详情请查看 RotateType。
  • pixelFormat ： 图像像素旋转后以 pixelFormat 格式的像素生成图像。

• Future<Image?> rotateFromImage({ required Image image, RotateType rotateType = RotateType.none, ImageByteFormat byteFormat = ImageByteFormat.rawRgba, PixelFormat pixelFormat = PixelFormat.rgba8888, bool isDispose = false, })

  该方法是将图像进行旋转，然后返回一个 Future<Image?> 类型的对象。该方法是异步的；下面是该方参数的介绍:

  • image ： 要旋转的原始图像。
  • rotateType ：图像像素集合旋转的类型。具体详情请查看 RotateType。
  • byteFormat ：将图像生成 byteFormat 像素格式的 Uint32List 集合， 具体内容请查看 ImageByteFormat 。
  • pixelFormat ： 图像像素旋转后以 pixelFormat 格式的像素生成图像。
  • isDispose ：在原始图像旋转后生成新的图像，原图像是否销毁。

📢 注意： 图像经过 IImage 旋转后，图像的宽高可能发生变化。例如： 原图像是 100 * 80 , 如果图像旋转 90° 或者 270°, 则旋转后的图像的宽高为 80 * 100；如果是 180°或者 360° ，则图像的宽高不变。

三、图像旋转的原理

• 图像旋转 90°

  

  左边是原图像的像素数据集合，右边是旋转 90° 后的图像像素集合。其实图像旋转 90°，其实就是将原图像像素 (x = 0, y = 0 ~ h -1) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 0) 的像素点，然后再 (x = 1, y = 0 ~ h -1) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 1) 的像素点，依次方式直到 x = w -1 为止 。

• 图像旋转 180°

  

  左边是原图像的像素数据集合，右边是旋转 180° 后的图像像素集合。其实图像旋转 180°，其实就是将原图像像素 (x = w -1 ~ 0, y = h -1 ) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 0) 的像素点；然后 像素 (x = w -1 ~ 0, y = h -2 ) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 1) 的像素点；依次方式直到 y = 0 为止。

• 图像旋转 270°

  

  左边是原图像的像素数据集合，右边是旋转 270° 后的图像像素集合。其实图像旋转 270°，其实就是将原图像像素 (x = w -1 , y = 0 ~ h -1 ) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 0) 的像素点；然后 像素 (x = w -2, y =0 ~ h - 1 ) 的像素点转化为旋转后图像的 (x = 0 ~ w -1, y = 1) 的像素点；依次方式直到 w = 0 为止。

• 图像旋转 360°

  图像旋转 360° 视为图像不进行任何变化。

四、图像旋转实例

下面是图像旋转的实例演示视频，如下所示：

上述实例的项目代码地址，请点击 图像旋转 Demo 下载。

五、支持与鼓励

上面我们介绍了图像的旋转，注意是图像旋转而不是组件旋转。IImage 是 Flutter 图像处理库之一，希望大家支持与鼓励。如果你有想法，请给提出来；让我们一起来丰富 IImage 的内容。如果您对这方面感兴趣，感觉这功能还行；您的关注、评论、收藏、点赞、分享都是对我的认可和鼓励。