将旋转的图像转换为矩形左上角

Question

我写了一个应用程序来绘制SMT托盘和填充它们的组件。我成功导入一个旋转程序，旋转并在中心坐标上绘制我的电子元件雕像，并具有α旋转角度（见下图）。我需要用X，Y偏移来翻译小雕像的00坐标，以在矩形中绘制整个旋转的小雕像。

So I only know the:
figurine rotation angle: dbRotationAngle
figurine X,Y position: dbX, dbY
figurine Width, Height: dbWidth, dbHeight
Rectangle LeftTop corner Position:  (LeftTop.X, LeftTop.Y)

所以我的问题是：如何计算旋转小雕像的偏移X，Y，以便在（LeftTop.X，LeftTop.Y）开始的矩形内绘制整个图像？

Answer 1

查找范围

您需要转换角落，然后找到最小值和最大值

首先从一个将在其中心点呈现的框开始

var box = {
   top:0,
   left:0,
   bottom:100,
   right:200,
   centerX:100,  // the position in the box that the render coordinates are.
   centerY:50
}

你有一个弧度旋转的盒子。它的X和Y轴将旋转这个量。

var rotation = ?

你需要4个角的坐标。

首先沿着物体旋转x轴

锻炼矢量

var axisX_x = Math.cos(rotation);
var axisX_y = Math.sin(rotation);

这也为我们提供了沿对象旋转轴的矢量。从x轴顺时针方向为90度。

var axisY_x = -axisX_y;
var axisY_y = axisX_x;

现在到左上角。我们需要找到它与物体旋转中心的距离。

var x = box.left - box.centerX;
var y = box.top - box.centerY;

现在通过沿着表示旋转轴的两个向量移动点来变换点。沿x轴移动x，沿y轴移动y。

var tx = x*axisX_x + y * axisY_x;
var ty = x*axisX_y + y * axisY_y;

现在因为我们想要盒子的范围，我们需要保存最小值和最大值;

var minX = tx;
var miny = ty;
var maxX = tx;
var maxy = ty;

下一个点是沿着物体x轴的右上角，所以沿着它移动盒子的宽度<​​/ p>

tx = tx + axisX_x * (box.right - box.left); // (box.right - box.left) is the
ty = ty + axisX_y * (box.right - box.left); // width of the box

现在我们需要检查最小值

minX = Math.min(minX, tx);
minY = Math.min(minY, ty);
maxX = Math.max(maxX, tx);
maxY = Math.max(maxY, ty);

现在沿着物体的高度向下移动Y轴，并获得旋转到右下角的物体的最大最大值。

tx = tx + axisY_x * (box.bottom - box.top);
ty = ty + axisY_y * (box.bottom - box.top);
minX = Math.min(minX, tx);
minY = Math.min(minY, ty);
maxX = Math.max(maxX, tx);
maxY = Math.max(maxY, ty);

左下角只剩下一个点，所以沿着X轴向后移动物体的宽度，得到最小值

tx = tx - axisX_x * (box.right - box.left);
ty = ty - axisX_y * (box.right - box.left);
minX = Math.min(minX, tx);
minY = Math.min(minY, ty);
maxX = Math.max(maxX, tx);
maxY = Math.max(maxY, ty);

现在，最小值和最大值保持框相对于其中心的范围

要绘制框，使其位于所需容器的左上角，并带有一些填充

var pad = 2; // two pixels from the edge
var containerLeft = 100;
var containerTop = 100;

var boxX = containerLeft - minX + pad;
var boxY = containerTop - minY + pad;

现在boxX和boxY保持盒子中心需要放在容器左上方的位置。使用最小值和最大值，您可以将盒子放在包含区域内的任何位置。

这是详细的解释，可以通过一两个功能减少，如果您只需要适合右上角，那么您只需要minX和minY。