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

【问题标题】：How do I fill Matrix4 with translation, skew and scale values in flutter?如何在颤动中用平移、倾斜和缩放值填充 Matrix4？
【发布时间】：2021-02-20 08:31:54
【问题描述】：

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

scaleX = 0.9198
scaleY = 0.9198
skewX = -0.3923
skewY = 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 值放在何处。请帮我解决这个问题。

【问题讨论】：

标签： flutter dart math matrix coordinates

【解决方案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，其中还提供了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 数据结构的人请注意，值是按列主顺序存储的，这意味着上面代码中的每一行实际上是一列，所以如果你要表示矩阵作为一个正常的变换矩阵，它是转置的。

矩阵如何与 CSS 转换一起使用：How do I use the matrix transform and other transform CSS properties?

【讨论】：