从二维变换矩阵中提取旋转、缩放值（更多说明）答案

【问题标题】：extract rotation, scale values from 2d transformation matrix (more clarification)从二维变换矩阵中提取旋转、缩放值（更多说明）
【发布时间】：2015-09-27 13:23:54
【问题描述】：

我已阅读与我的查询 this 和 this 相关的问题。基于answer，我计算了比例、旋转和平移。我确实犯了一些错误，这就是为什么我无法获得正确的值。以下是我的详细步骤：

第 1 步：这是我最初的棕色 div，有四个不同颜色的角，我将对其应用转换，而 origin 是 0,0

<body>
  <div id="viewport" style="left:100px;top:50px;position:relative;">
    <div id="maptiles" style="
  position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  ">
      <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
      <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
      <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
      <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
      <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
    </div>
    <!-- just cartision lines as base-->
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px">
      </rect>
      <line x1="0" y1="100" x2="500" y2="100" style="stroke:gray" />
      <line x1="0" y1="200" x2="500" y2="200" style="stroke:gray" />
      <line x1="0" y1="300" x2="500" y2="300" style="stroke:gray" />
      <line x1="0" y1="400" x2="500" y2="400" style="stroke:gray" />
      <line x1="100" y1="0" x2="100" y2="500" style="stroke:gray" />
      <line x1="200" y1="0" x2="200" y2="500" style="stroke:gray" />
      <line x1="300" y1="0" x2="300" y2="500" style="stroke:gray" />
      <line x1="400" y1="0" x2="400" y2="500" style="stroke:gray" />
    </svg>
</body>

第 2 步： 接下来我应用不同的转换：

transform:translate(250px, 250px) rotate(45deg) translate(-250px, -250px) translate(38px, 250px) rotate(20deg) translate(-38px, -250px) scale(.5)

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform:translate(250px, 250px) rotate(45deg) translate(-250px, -250px) translate(38px, 250px) rotate(20deg) translate(-38px, -250px) scale(.5);  
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
 
 </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

第 3 步：现在我计算所有上述变换的矩阵变换并应用于原始 div：

变换：矩阵(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.00089895411568)

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684);
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
  </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

我得到与“步骤 2”中相同的输出

我正在使用transformatrix模块来计算变换矩阵。

第四步：最后我根据answer来计算缩放、旋转和平移。

变换：旋转（-25deg）缩放（0.5）平移（310.611px，-40px）

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform: rotate(-25deg) scale(0.5) translate(310.611px,-40px);
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
  
  </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

并将这些转换应用于原始 div，它看起来不像“步骤 2”或“步骤 3”的输出。我期待它会给我在缩放、旋转和平移方面的组合转换。

我的要求：用户将在 div 上应用许多转换，最后我将允许将组合/最终旋转、缩放和平移存储给用户。

请让我知道我在哪里做错了或者这不可能（计算组合值）。

【问题讨论】：

标签： math matrix transformation

【解决方案1】：

指定transform matrix in HTML时，代码如下：

transform: matrix(a, b, c, d, tx, ty);

对应于以下矩阵：

| a c tx |    
| b d ty |
| 0 0 1  |

请注意，与您链接的答案相比，c 和 b 交换了。

或者，您可以交换矩阵中的 b 和 c，并将 HTML 代码视为：

transform: matrix(a, c, b, d, tx, ty);

所以对于这个矩阵：

transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684)

旋转角度为 atan(0.45315389351832497/0.21130913087034978) = 65 度。

【讨论】：

感谢您的澄清。而正确的旋转公式是atan2(b,a) 而不是atan2(-b,a) ?
对于上面的示例矩阵，它是 atan(-c,a) 因为 b 和 c 被交换，因为将值列表映射到矩阵中的位置的不同约定。由于 b = -c，atan2(b,a) 将给出正确的结果。
再观察answer rotation, followed by scale and then translation 中提到的最终转换的顺序似乎是错误的，如果顺序是translation rotation scale 或英文他的意思相同，我得到了正确的看法。