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

Question

假设，对于高度为 200、宽度为 300 的容器，我有这些值：

scaleX = 0.9198
比例 Y = 0.9198
skewX = -0.3923
偏斜 Y = 0.3923
translateX = 150
翻译Y = 150

现在，如何在 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 值放入此矩阵的何处。请帮我解决这个问题。

Answer 1

偏斜值

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

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

可以参考Flutter Matrix4 documentation, which also provides implementation notes for Matrix4.skewX and 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 转换一起使用：How do I use the matrix transform and other transform CSS properties?

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

How do I fill Matrix4 with translation, skew and scale values in flutter?

math

matrix

coordinates

dart

flutter

偏斜值