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

Posted 2023-02-25

【中文标题】将旋转的图像转换为矩形左上角

【英文标题】：Translate a rotated image into a Rectangle Left Top Corner

【发布时间】：2015-12-18 18:35:41

【问题描述】：

我编写了一个应用程序来绘制 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) 开始的矩形内绘制整个图像？

【参考方案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 = ?

你需要四个角的坐标。

首先锻炼沿对象旋转 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。

【讨论】：

盒子是小雕像的一个感兴趣的区域？对吗？

盒子是你要移动的对象，容器是盒子最终要进入的区域。