从旋转的矩形计算边界框坐标

Question

我有一个矩形左上角的坐标以及它的宽度、高度和旋转角度（0 到 180 和 -0 到 -180）。

我试图获取矩形周围实际框的边界坐标。

计算边界框

• Min y、max y、min x、max x 坐标的简单方法是什么？

A 点并不总是在最小 y 边界上，它可以在任何地方。

如果需要的话，我可以使用 as3 中的矩阵转换工具包。

Answer 1

我使用“区域”首先旋转矩形，然后使用该旋转区域来检测该矩形，

        r = new Rectangle(new Point(100, 200), new Size(200, 200));         
        Color BorderColor = Color.WhiteSmoke;
        Color FillColor = Color.FromArgb(66, 85, 67);
        int angle = 13;
        Point pt = new Point(r.X, r.Y);
        PointF rectPt = new PointF(r.Left + (r.Width / 2),
                               r.Top + (r.Height / 2));
       //declare myRegion globally 
        myRegion = new Region(r);

        // Create a transform matrix and set it to have a 13 degree

        // rotation.
        Matrix transformMatrix = new Matrix();
        transformMatrix.RotateAt(angle, pt);

        // Apply the transform to the region.
        myRegion.Transform(transformMatrix);
        g.FillRegion(Brushes.Green, myRegion);
        g.ResetTransform();

现在检测该矩形

        private void panel_MouseMove(object sender, MouseEventArgs e)
    {


        Point point = e.Location;
        if (myRegion.IsVisible(point, _graphics))
        {
            // The point is in the region. Use an opaque brush.
            this.Cursor = Cursors.Hand;
        }
        else {
            this.Cursor = Cursors.Cross;
        }

    }

Answer 2

• 变换所有四个角的坐标
• 找到所有四个 x 中最小的 min_x
• 找到所有四个 x 中最大的并称之为 max_x
• 与 y 相同
• 您的边界框是 < code>(min_x,min_y), (min_x,max_y), (max_x,max_y), (max_x,min_y)

AFAIK，没有任何皇家道路可以让你更快地到达那里。

如果您想知道如何转换坐标，请尝试：

x2 = x0+(x-x0)*cos(theta)+(y-y0)*sin(theta)
y2 = y0-(x-x0)*sin(theta)+(y-y0)*cos(theta)

其中 (x0,y0) 是您旋转的中心。 您可能需要根据您的三角函数（它们是否期望度数或弧度）、坐标系的意义/符号与您指定角度的方式等进行修改。

Answer 3

我知道您要求的是 ActionScript，但是，以防万一有人来这里寻找 iOS 或 OS-X 答案，那就是：

+ (CGRect) boundingRectAfterRotatingRect: (CGRect) rect toAngle: (float) radians
{
    CGAffineTransform xfrm = CGAffineTransformMakeRotation(radians);
    CGRect result = CGRectApplyAffineTransform (rect, xfrm);

    return result;
}

如果您的操作系统愿意为您完成所有艰苦的工作，那就让它吧！ :)

斯威夫特：

func boundingRectAfterRotatingRect(rect: CGRect, toAngle radians: CGFloat) -> CGRect {
    let xfrm = CGAffineTransformMakeRotation(radians)
    return CGRectApplyAffineTransform (rect, xfrm)
}

Answer 4

MarkusQ 概述的方法非常有效，但请记住，如果您已经有了 A 点，则无需变换其他三个角。

另一种更有效的方法是测试您的旋转角度位于哪个象限，然后直接计算答案。 这是更有效的，因为最坏的情况只有两个 if 语句（检查角度），而另一种方法最坏的情况有 12 个（检查其他三个角以查看它们是否大于当前角时，每个组件有 6 个）我认为最大值或小于当前最小值）。

基本算法仅使用毕达哥拉斯定理的一系列应用，如下所示。 我用 theta 表示旋转角度，并以度数表示检查，因为它是伪代码。

ct = cos( theta );
st = sin( theta );

hct = h * ct;
wct = w * ct;
hst = h * st;
wst = w * st;

if ( theta > 0 )
{
    if ( theta < 90 degrees )
    {
        // 0 < theta < 90
        y_min = A_y;
        y_max = A_y + hct + wst;
        x_min = A_x - hst;
        x_max = A_x + wct;
    }
    else
    {
        // 90 <= theta <= 180
        y_min = A_y + hct;
        y_max = A_y + wst;
        x_min = A_x - hst + wct;
        x_max = A_x;
    }
}
else
{
    if ( theta > -90 )
    {
        // -90 < theta <= 0
        y_min = A_y + wst;
        y_max = A_y + hct;
        x_min = A_x;
        x_max = A_x + wct - hst;
    }
    else
    {
        // -180 <= theta <= -90
        y_min = A_y + wst + hct;
        y_max = A_y;
        x_min = A_x + wct;
        x_max = A_x - hst;
    }
}

此方法假设您拥有您所说的内容，即 A 点和位于 [-180, 180] 范围内的 theta 值。 我还假设 theta 沿顺时针方向增加，因为这就是图中旋转 30 度的矩形似乎表明您正在使用的，我不确定右侧的部分试图表示什么。 如果这是错误的方法，那么只需交换对称子句以及 st 项的符号即可。

Answer 5

    fitRect: function( rw,rh,radians ){
            var x1 = -rw/2,
                x2 = rw/2,
                x3 = rw/2,
                x4 = -rw/2,
                y1 = rh/2,
                y2 = rh/2,
                y3 = -rh/2,
                y4 = -rh/2;

            var x11 = x1 * Math.cos(radians) + y1 * Math.sin(radians),
                y11 = -x1 * Math.sin(radians) + y1 * Math.cos(radians),
                x21 = x2 * Math.cos(radians) + y2 * Math.sin(radians),
                y21 = -x2 * Math.sin(radians) + y2 * Math.cos(radians), 
                x31 = x3 * Math.cos(radians) + y3 * Math.sin(radians),
                y31 = -x3 * Math.sin(radians) + y3 * Math.cos(radians),
                x41 = x4 * Math.cos(radians) + y4 * Math.sin(radians),
                y41 = -x4 * Math.sin(radians) + y4 * Math.cos(radians);

            var x_min = Math.min(x11,x21,x31,x41),
                x_max = Math.max(x11,x21,x31,x41);

            var y_min = Math.min(y11,y21,y31,y41);
                y_max = Math.max(y11,y21,y31,y41);

            return [x_max-x_min,y_max-y_min];
        }

Answer 6

如果您使用的是 GDI+ ，您可以创建一个新的 GrpaphicsPath -> 添加任何点或形状 -> 应用旋转变换 -> 使用 GraphicsPath.GetBounds() ，它将返回一个包围旋转形状的矩形。

（编辑）VB.Net 示例

Public Shared Sub RotateImage(ByRef img As Bitmap, degrees As Integer)
' http://stackoverflow.com/questions/622140/calculate-bounding-box-coordinates-from-a-rotated-rectangle-picture-inside#680877
'
Using gp As New GraphicsPath
  gp.AddRectangle(New Rectangle(0, 0, img.Width, img.Height))

  Dim translateMatrix As New Matrix
  translateMatrix.RotateAt(degrees, New PointF(img.Width \ 2, img.Height \ 2))
  gp.Transform(translateMatrix)

  Dim gpb = gp.GetBounds

  Dim newwidth = CInt(gpb.Width)
  Dim newheight = CInt(gpb.Height)

  ' http://www.codeproject.com/Articles/58815/C-Image-PictureBox-Rotations
  '
  Dim rotatedBmp As New Bitmap(newwidth, newheight)

  rotatedBmp.SetResolution(img.HorizontalResolution, img.VerticalResolution)

  Using g As Graphics = Graphics.FromImage(rotatedBmp)
    g.Clear(Color.White)
    translateMatrix = New Matrix
    translateMatrix.Translate(newwidth \ 2, newheight \ 2)
    translateMatrix.Rotate(degrees)
    translateMatrix.Translate(-img.Width \ 2, -img.Height \ 2)
    g.Transform = translateMatrix
    g.DrawImage(img, New PointF(0, 0))
  End Using
  img.Dispose()
  img = rotatedBmp
End Using

结束子

Answer 7

当矩形绕其中心旋转时，计算很简单：

function getBoundingBox(rX, rY, rW, rH, rA) {
  const absCosRA = Math.abs(Math.cos(rA));
  const absSinRA = Math.abs(Math.sin(rA));

  const bbW = rW * absCosRA + rH * absSinRA;
  const bbH = rW * absSinRA + rH * absCosRA;
  
  const bbX = rX - (bbW - rW) / 2;
  const bbY = rY - (bbH - rH) / 2;

  return { x: bbX, y: bbY, w: bbW, h: bbH };
}

Answer 8

尽管 Code Guru 陈述了 GetBounds() 方法，但我注意到问题被标记为 as3、flex，因此这里有一个 as3 片段来说明这个想法。

var box:Shape = new Shape();
box.graphics.beginFill(0,.5);
box.graphics.drawRect(0,0,100,50);
box.graphics.endFill();
box.rotation = 20;
box.x = box.y = 100;
addChild(box);

var bounds:Rectangle = box.getBounds(this);

var boundingBox:Shape = new Shape();
boundingBox.graphics.lineStyle(1);
boundingBox.graphics.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
addChild(boundingBox);

我注意到有两个方法似乎做同样的事情： getBounds() 和 getRect()

Answer 9

/**
     * Applies the given transformation matrix to the rectangle and returns
     * a new bounding box to the transformed rectangle.
     */
    public static function getBoundsAfterTransformation(bounds:Rectangle, m:Matrix):Rectangle {
        if (m == null) return bounds;

        var topLeft:Point = m.transformPoint(bounds.topLeft);
        var topRight:Point = m.transformPoint(new Point(bounds.right, bounds.top));
        var bottomRight:Point = m.transformPoint(bounds.bottomRight);
        var bottomLeft:Point = m.transformPoint(new Point(bounds.left, bounds.bottom));

        var left:Number = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
        var top:Number = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
        var right:Number = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
        var bottom:Number = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
        return new Rectangle(left, top, right - left, bottom - top);
    }

Answer 10

将旋转矩阵应用于角点。 然后分别使用获得的 x,y 坐标的最小值/最大值来定义新的边界框。

Answer 11

以下是我的开源库中的三个函数。 这些函数在 Java 中经过全面测试，但公式可以轻松翻译为任何语言。

签名为：

public static float getAngleFromPoint(final Point centerPoint, Final Point touchPoint)

public static float getTwoFingerDistance(float firstTouchX, float firstTouchY, float secondaryTouchX, float secondaryTouchY)

Point getPointFromAngle(final double angle, final double radius)

该解决方案假设像素密度均匀分布。
在旋转对象之前，请执行以下操作：

1. 使用 getAngleFromPoint 计算从中心到右上角的角度（假设返回 20 度），这意味着左上角为 -20 度或 340 度。

2. 使用 getTwoFingerDistance 返回中心点到右上角的对角距离（这个距离显然应该是所有角都相同，这个距离将在接下来的计算中使用）。

3. 现在假设我们将对象顺时针旋转 30 度。 我们现在知道右上角必须为 50 度，左上角必须为 10 度。

4. 您现在应该能够在左上角和右上角使用 getPointFromAngle 函数。 使用步骤 2 返回的半径。
   X 位置从右上角乘以 2 应该给出新的宽度，Y 位置从左上角乘以 2 应该给出新高度。

上述 4 个步骤应根据您旋转对象的距离设置条件，否则您可能会返回高度作为宽度，将宽度作为高度返回。

请记住，角度函数以 0-1 的因子表示，而不是 0-360（只需在适当的情况下乘以或除以 360）：

//从两点获取角度，表示为 0 -1 的因子（0 为 0） /360, 0.25 为 90 度等)

public float getAngleFromPoint(final Point centerPoint, final Point touchPoint) {

    float returnVal = 0;

    //+0 - 0.5
    if(touchPoint.x > centerPoint.x) {

        returnVal = (float) (Math.atan2((touchPoint.x - centerPoint.x), (centerPoint.y - touchPoint.y)) * 0.5 / Math.PI);

    }
    //+0.5
    else if(touchPoint.x < centerPoint.x) {

        returnVal = (float) (1 - (Math.atan2((centerPoint.x - touchPoint.x), (centerPoint.y - touchPoint.y)) * 0.5 / Math.PI));

    }//End if(touchPoint.x > centerPoint.x)

    return returnVal;

}

//测量两点之间的对角线距离

public float getTwoFingerDistance(final float firstTouchX, final float firstTouchY, final float secondTouchX, final float secondTouchY) {

    float pinchDistanceX = 0;
    float pinchDistanceY = 0;

    if(firstTouchX > secondTouchX) {

        pinchDistanceX = Math.abs(secondTouchX - firstTouchX);

    }
    else if(firstTouchX < secondTouchX) {

        pinchDistanceX = Math.abs(firstTouchX - secondTouchX);

    }//End if(firstTouchX > secondTouchX)

    if(firstTouchY > secondTouchY) {

        pinchDistanceY = Math.abs(secondTouchY - firstTouchY);

    }
    else if(firstTouchY < secondTouchY) {

        pinchDistanceY = Math.abs(firstTouchY - secondTouchY);

    }//End if(firstTouchY > secondTouchY)

    if(pinchDistanceX == 0 && pinchDistanceY == 0) {

        return 0;

    }
    else {

        pinchDistanceX = (pinchDistanceX * pinchDistanceX);
        pinchDistanceY = (pinchDistanceY * pinchDistanceY);
        return (float) Math.abs(Math.sqrt(pinchDistanceX + pinchDistanceY));

    }//End if(pinchDistanceX == 0 && pinchDistanceY == 0)

}

//从给定半径的角度获取 XY 坐标（角度以 0-1 的系数表示，0 为 0/360 度，0.75 为270 等）

public Point getPointFromAngle(final double angle, final double radius) {

    final Point coords = new Point();
    coords.x = (int) (radius * Math.sin((angle) * 2 * Math.PI));
    coords.y = (int) -(radius * Math.cos((angle) * 2 * Math.PI));

    return coords;

}

这些代码片段来自我的开源库： https://bitbucket.org/warwick/hgdialrepo 和 https://bitbucket.org/warwick/hacergestov2。
一个是 Android 的手势库，另一个是 Android 的拨号控件。 还有拨号控件的 OpenGLES 2.0 实现：https://bitbucket.org/warwick/hggldial

Answer 12

我不确定我是否理解，但是复合变换矩阵将为您提供所有相关点的新坐标。 如果您认为矩形可能会在变换后溢出可成像区域，请应用剪切路径。

如果您不熟悉矩阵的确切定义，请查看此处。