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

Question

我写了一个应用程序来绘制 SMT 托盘和填充它们的组件。我成功地导入了一个旋转程序，该程序以 alpha 旋转角度在中心坐标中旋转并绘制我的电子元件小雕像（见下图）。我需要用 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);

这也为我们提供了沿对象的 y 旋转轴的矢量。从 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 轴的右上角，所以沿着它移动框的宽度

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。

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

Translate a rotated image into a Rectangle Left Top Corner

trigonometry

canvas

rotation

draw