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

Question

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

scaleX = 0.9198

scaleY = 0.9198

skewX = -0.3923

偏斜 = 0.3923

翻译X = 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 ，它还提供了 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 变换一起使用:How do I use the matrix transform and other transform CSS properties?