Flutter 中的 Matrix4，它有 16 个参数，您都知道它们的含义吗？（一）

半醉看夕阳
1,413 阅读9分钟

[》跳过拾光记忆]

拾光记忆

1. Flutter 项目资产管理，看这一篇就够了！

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

2. Flutter 手势在多指触摸时一些方法会多次触发

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

3. Dart 的枚举类型的高阶用法

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

4. Flutter 可以快速实现单项或者多项选择，你知道吗？

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

5. Flutter 的吸收指针和忽略指针的作用以及区别

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

6. Flutter 项目滑动轨道的高阶用法

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

7. Flutter 的 Debug 日志管理，可自定义多种输出样式

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

8. Flutter 中 Image 图像便捷添加图片水印或者文字水印

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

9. Flutter 中 Image 图像的高阶用法，你知道多少？

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

[返回拾光记忆《]

一、简述

在 Flutter 应用开发中，可能需要对图像或小部件进行缩放、移动、旋转、拉伸、透视等操作。如果没有选择正确的实现方式，开发过程中可能会遇到许多困难，浪费更多的时间和精力，也无法得到高性能的结果。因此，我们建议使用 Matrix4 进行便捷处理，以处理上述功能。

二、Matrix4 简介

Matrix4 是 Flutter 中的一个矩阵类，用于进行3D变换和2D变换。它表示一个 4x4 的矩阵，包含16个double类型的值，可以分为四行四列。通过修改Matrix4的各个元素值，我们可以实现平移、旋转、缩放、拉伸、透视等3D变换和2D变换。在Flutter中，Matrix4常用于对Widget进行变换。例如，我们可以使用Matrix4对图像进行旋转、缩放或平移，在实现动画效果时非常实用。除此之外，Matrix4还可以与Transform组件一起使用，实现各种复杂的动画效果和布局变换。 总之，Matrix4是Flutter中非常重要的一个类，掌握它的使用方法可以帮助我们更好地实现各种动画和布局效果。

三、Matrix4 基础分析

Matrix4 是一个 4x4 的矩阵，则其模型矩阵展示如下所示:

m1.png

下面我们将对这 16 各元素进行分析，探讨它们各自的作用以及效果展示如何。

1、 a11

X 轴方向上的缩放比例。

  • 当该值小于1时，会产生缩小效果；
  • 当大于1时，会产生放大效果；
  • 当等于1时，不会有任何变化

该值的测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(1 + value);
      transformStream.add(
        Matrix4(1 + value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
)

我们动态调整 a11 的值，显示效果如下:

m2.gif

2、 a12

X轴和Y轴之间的拉伸参数。该值为正数时会将图像向左上拉伸，为负数时会将图像向右上拉伸。
该参数的测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, value, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

我们动态改变其值，产生的效果如下:

m10.gif

该值的产生的效果也受到控制点的影响，不同的控制点表现的效果也是不同。

3、 a13

X轴和Z轴之间的拉伸参数。该值为正数时会将图像左上拉伸，为负数时会将图像右上拉伸。 测试代码:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, value, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

由于 Flutter 对 3D 支持好不够，就无法视图演示。

4、 a14

该参数是 X 轴方向的视投影。投影的效果和原点相对坐标有关。 该值的测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, value, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

我们动态调整参数，展示效果和控制中心点有关，如下：

  • Transform 的 alignment = Alignment.topCenter

    m6.gif

  • Transform 的 alignment = Alignment.centerLeft

    m7.gif

还有很多效果我就不再一一演示了。

5、 a21

Y轴和X轴之间的拉伸参数。该值为正数时会将图像向右拉伸，为负数时会将图像向左拉伸，控制点不同效果不同。

该参数的测试代码如下：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, value, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

动态调整该参数，展示效果如下:

M11.gif

6、 a22

Y轴方向上的缩放比例。

  • 当该值小于1时，会产生缩小效果；
  • 当大于1时，会产生放大效果；
  • 当等于1时，不会有任何变化

该值的测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(1 + value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1 + value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

我们动态调整 a22 的值，显示效果如下:

m3.gif

7、 a23

Y轴和Z轴之间的拉伸参数。该值为正数时会将图像右上拉伸，为负数时会将图像左下拉伸。测试代码如下：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, value, 0, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),
8、 a24

该参数是 Y 轴方向的视投影。投影的效果和原点相对坐标有关。 该值的测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, value, 0, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),

我们动态调整参数，展示效果和控制中心点有关，如下：

  • Transform 的 alignment = Alignment.center

    m8.gif

  • Transform 的 alignment = Alignment.centerRight

    m9.gif

还有很多效果我就不再一一演示了。

9、 a31

X轴和Z轴之间的拉伸参数。该值为正数时会将图像左上拉伸，为负数时会将图像右上拉伸。测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, value, 0, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),
10、 a32

Y轴和Z轴之间的拉伸参数。该值为正数时会将图像右上拉伸，为负数时会将图像左下拉伸：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, value, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),
11、 a33

Z 轴上的缩放。由于目前 Flutter 还未能实现 3D 视图效果，该参数演示。测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, value, 1, 0, 0, 0, 0, 1),
      );
    },
  ),
),
12、 a34

Z 轴方向上的透视投影，由于 Flutter 对 3D 视图支持还不够成熟，目前无法演示。测试代码如下：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, value, 0, 0, 0, 1),
      );
    },
  ),
),
13、 a41

X 轴上的位移量。

  • 该值为正，图像向 X 轴正向偏移移动。
  • 该值为负，图像向 X 轴负向偏移移动。

该值测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, value * 100, 0, 0, 1),
      );
    },
  ),
),

我们动态的改变该值，展示效果如下:

m4.gif

14、 a42

Y 轴上的位移量。

  • 该值为正，图像向 Y 轴正向偏移移动。
  • 该值为负，图像向 Y 轴负向偏移移动。

该值测试代码如下:

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, value * 100, 0, 1),
      );
    },
  ),
),

我们动态的改变该值，展示效果如下:

m5.gif

15、 a43

Z 轴上的位移量。该值由于 Flutter 的限制目前无法视图演示，测试代码如下：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, value, 1),
      );
    },
  ),
),
16、 a44

X 、 Y 、Z 轴进行该值的倒数缩放。

  • 该值为正数时， 图像整体放大。
  • 该值为负数时， 图像整体缩小。

该值的测试代码如下：

SizedBox(
  width: 400,
  height: 26,
  child: IDKitSlider.bilateralSlider(
    sliderValueMethod: (value) {
      sliderStream.add(value);
      transformStream.add(
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 / (1 + value)),
      );
    },
  ),
),

动态的修改该值产生的效果如下：

吗2.gif

17. 总结

这是介绍 Matrix4 的 16 个参数个是什么作用。由于 Flutter 对 3D 支持还不够完善，所以上方针对 Z 轴的一些参数，就无法演示其视觉效果。

四、 综述

本文主要介绍 Matrix4 的 16 个参数对视觉效果的影响，而非其使用和应用方面。读者请注意，使用和应用方面的内容将在下一篇文章中进行介绍和演示。如果您对本文感到满意，请不吝留下您的小心心 ❤️。

avatar
文章
阅读
粉丝
相关推荐
[Flutter] sliver: 从BoxConstraint到SliverConstraint
728阅读
 · 
7点赞
Flutter跨平台发送系统通知和状态栏通知技术浅析
2.0k阅读
 · 
11点赞
Flutter中用SearchDelegate实现简单的搜索
810阅读
 · 
6点赞
Flutter-Web 从0到部署上线
65阅读
 · 
2点赞
动态网络：Flutter应用如何处理变化莫测的网络状态
1.5k阅读
 · 
16点赞
Flutter 桌面端实现多窗口
3.4k阅读
 · 
4点赞
Flutter 性能优化之 FFI 系列(一): Flutter调用Go的库文件
1.6k阅读
 · 
15点赞
[Flutter翻译]使用 Dart FFI 在桌面 Flutter 应用程序中集成 C 库
1.1k阅读
 · 
3点赞
[Flutter] infinity与可滚动布局
928阅读
 · 
6点赞

友情链接：