如何将矩形移动到另一个旋转和平移的矩形的左上角？

Question

假设我有 Rect1 和 Rect2 的以下矩阵，

Rect1 = [
    0.707, 0.707, 0, 0, 
    -0.707, 0.707, 0, 0, 
    0, 0, 1, 0, 
    0, 0, 0, 1
]

Rect2 = [
    0.707, 0.707, 0, 0, 
    -0.707, 0.707, 0, 0, 
    0, 0, 1, 0, 
    200, 200, 0, 1
]

Rect1 和 Rect2 都是 45 度。 Rect2 被翻译成(200, 200)。 Rect1 的高度为20px，宽度为20px。 Rect2 的高度为200px，宽度为300px。

在画布中，它们看起来如下所示，

现在，我如何计算Rect1 的位置，使其位于Rect1 的左上角，使其看起来像下面这样，

这里是代码：https://codesandbox.io/s/hopeful-driscoll-ws8q1

Answer 1

当您旋转两个图像时，矩形块变为大约。 354 x 354 和小方块 id 约。 28 x 28。因此，较大矩形的顶端偏移 106 像素，然后添加 200 像素进行平移。所以它从左边算起的位置是 306px。类似地，从顶部它被位移 -71px，然后是 200px 平移。所以它是129px。所以你较小的矩形位置可以像这样移动。

const box2Node = {
  node: document.getElementById("box2"),
  matrix: matrixIdentity(),
  height: 20,
  width: 20,
  settings() {
    return [1, angle, [306, 129]];
  }
};