时间戳

首页 > 解决方案 > 如何在颤动中用平移、倾斜和缩放值填充 Matrix4？

flutter - 如何在颤动中用平移、倾斜和缩放值填充 Matrix4？

问题描述

假设，我有一个高度为 200 和宽度为 300 的容器的这些值：

现在，如何在 Matrix4 中正确填写这些值？

我试过这样做：

Matrix4(
  0.9198, 0, 0, 0, //
  0, 0.9198, 0, 0, //
  0, 0, 1, 0, //
  150, 150, 0, 1,
)

也就是说，

Matrix4(
  scaleX, 0, 0, 0, //
  0, scaleY, 0, 0, //
  0, 0, 1, 0, //
  translateX, translateY, 0, 1,
)

但我不确定在这个矩阵中的位置skewX和值。skewY请帮我解决一下这个。

标签： flutterdartmathmatrixcoordinates

解决方案

偏斜值

这是一个有点微妙的话题，因为它可以用几种不同的方式来解释。矩阵的特定单元格与特定名称相关联，如您的问题中所标识的那样translate x，translate y、scale x、 和scale y。skew x在这种情况下，您很可能是指来自称为and skew y（有时也称为shear xand ）的矩阵中的值shear y，它指的是索引 4 和 1（从零开始，列主要顺序）。它们之所以被称为这些名称，是因为当它们自己放入单位矩阵时，它们会执行该操作（平移、缩放或倾斜），但当有多个值时，它会变得更加复杂。

另一方面，这也可以解释为一系列操作（例如缩放 (0.9198, 0.9198, 1)，然后倾斜 (-0.3923, 0.3923)，然后平移 (150, 150, 0)），以及然后是一系列矩阵乘法，最终会产生一个外观相似但数值不同的矩阵。我假设你不是这个问题的意思。不过，您可以在此处阅读有关它的更多信息。

您可以查阅Flutter Matrix4 文档，该文档还提供了Matrix4.skewX和Matrix4.skewY的实现说明。倾斜存储在（从零开始的）索引 4 和 1 中，作为倾斜角度的切线。

Matrix4(
  scaleX, skewY,   0,   0, // skewY could also be tan(ySkewAngle)
  skewX,  scaleY,  0,   0, // skewX could also be tan(xSkewAngle)
  0,      0,       1,   0, //
  translateX, translateY, 0, 1,
)

请注意，那些不熟悉 Flutter 数据结构的值是按列主要顺序存储的，这意味着上述代码中的每一行实际上都是一列，因此如果要将矩阵表示为普通变换矩阵，则它是转置的.

更多信息：

转换矩阵：https ://en.wikipedia.org/wiki/Transformation_matrix

矩阵如何与 CSS 变换一起使用：如何使用矩阵变换和其他变换 CSS 属性？

推荐阅读