获取未旋转的旋转矩形的边界 [英] Get bounds of unrotated rotated rectangle

问题描述

我有一个已经应用了旋转的矩形。我想获得未旋转的尺寸（x，y，宽度，高度）。

以下是元素的维度：

  Bounds at 90转：{
身高30 
宽度0 
x 25 $ b $ 10 
} 
  

以下是旋转设置为无后的尺寸：

 旋转时的界限0 {
 height 0 
 width 30 
x 10 
y 25 
} 
  

过去，我能够将旋转设置为0，然后读取更新的边界。但是，我使用的其中一个功能有一个错误，所以现在我必须手动完成。

是否有一个简单的公式可以使用我已有的信息获得0的界限？

更新：对象围绕对象的中心旋转。

更新


我需要的是以下功能：

  function getRectangleAtRotation（rect，rotation）{
 var rotatingRectangle = {} 
 rotatingRectangle.x = Math.rotation（rect.x * rotation）; 
 rotateRectangle.y = Math.rotation（rect.y * rotation）; 
 rotateRectangle.width = Math.rotation（rect.width * rotation）; 
 rotateRectangle.height = Math.rotation（rect.height * rotation）; 
返回rotateRectangle; 
} 
 
 var rectangle = {x：25，y：10，height：30，width：0}; 
 var rect2 = getRectangleAtRotation（rect，-90）; // {x：10，y：25，身高：0，宽度：30} 
  

我找到了类似的问题

现在，我们要将它旋转一些角度 alpha （以弧度表示） ：

要计算绿色边，它是清楚它是由两个重复的矩形三角形组成如下：

因此，首先解决角度，我们知道：

1. 三角形的角度总和 PI / 2 ，或180°;


2. 旋转 alpha ;


3. 一个角度伽玛 PI / 4 ，或90°;


4. 最后一个角度，beta，是 gamma - alpha ;

现在，了解所有角度和一侧，我们可以使用正弦律来计算其他边。

简要回顾一下，正弦法则告诉我们，边长与它的相反角度之间存在相等的关系。更多信息：

请记住 AD 是我们的原始高度。

鉴于 sin（gamma）为1，我们也知道 AD ，我们可以写出方程式：

对于右上角三角形（和b） ottom离开了一个），然后我们有：

拥有所有需要的边，我们可以轻松计算宽度和高度：

  width = EA + AF 
 height = ED + FB 
  

此时我们可以编写一个非常简单的方法，给定一个矩形和一个以弧度为单位的旋转角度，可以返回新的边界：

  function rotate（rectangle，alpha）{
 const {width： AB，高度：AD} =矩形
 const gamma = Math.PI / 4，
 beta = gamma  -  alpha，
 EA = AD * Math.sin（alpha），
 ED = AD * Math.sin（beta），
 FB = AB * Math.sin（ alpha），
 AF = AB * Math.sin（beta）
 
返回{
宽度：EA + EF，
身高：ED + FB 
 } 
} 
  

此方法可以像以下一样使用：

  const rect = {width：30，height：50} 
 const rotation = Math.PI / 4.2 //这是一个随机值这里
 const bounds = rotate（rect，rotation）
  

希望没有拼写错误。 ..

I have a rectangle that has a rotation already applied to it. I want to get the the unrotated dimensions (the x, y, width, height).

Here is the dimensions of the element currently:

Bounds at a 90 rotation: {
 height     30
 width      0
 x          25
 y          10
}

Here are the dimensions after the rotation is set to none:

Bounds at rotation 0 {
 height     0
 width      30
 x          10
 y          25
}

In the past, I was able to set the rotation to 0 and then read the updated bounds . However, there is a bug in one of the functions I was using, so now I have to do it manually.

Is there a simple formula to get the bounds at rotation 0 using the info I already have?

Update: The object is rotated around the center of the object.

UPDATE:
What I need is something like the function below:

function getRectangleAtRotation(rect, rotation) {
    var rotatedRectangle = {}
    rotatedRectangle.x = Math.rotation(rect.x * rotation);
    rotatedRectangle.y = Math.rotation(rect.y * rotation);
    rotatedRectangle.width = Math.rotation(rect.width * rotation);
    rotatedRectangle.height = Math.rotation(rect.height * rotation);
    return rotatedRectangle;
}

var rectangle = {x: 25, y: 10, height: 30, width: 0 };
var rect2 = getRectangleAtRotation(rect, -90); // {x:10, y:25, height:0, width:30 }

I found a similar question here.

UPDATE 2
Here is the code I have. It attempts to get the center point of the line and then the x, y, width, and height:

var centerPoint = getCenterPoint(line);
var lineBounds = {};
var halfSize;

halfSize = Math.max(Math.abs(line.end.x-line.start.x)/2, Math.abs(line.end.y-line.start.y)/2);
lineBounds.x = centerPoint.x-halfSize;
lineBounds.y = centerPoint.y;
lineBounds.width = line.end.x;
lineBounds.height = line.end.y;

function getCenterPoint(node) {
    return {
        x: node.boundsInParent.x + node.boundsInParent.width/2,
        y: node.boundsInParent.y + node.boundsInParent.height/2
    }
}

I know the example I have uses a right angle and that you can swap the x and y with that but the rotation can be any amount.

UPDATE 3

I need a function that returns the unrotated bounds of a rectangle. I have the bounds at a specific rotation already.

function getUnrotatedRectangleBounds(rect, currentRotation) {
    // magic
    return unrotatedRectangleBounds;
}

解决方案

I think I can handle the calculation of the bounds size without too much effort (few equations), I'm not sure, instead, how you would like x and y to be handled.

First, let's properly name things:

Now, we want to rotate it by some angle alpha (in radians):

To calculate the green sides, it is clear that it's made of two repeated rectangle-triangles as the following:

So, solving angles first, we know that:

1. the sum of the angles of a triangle is PI / 2, or 180°;
2. the rotation is alpha;
3. one angle gamma is PI / 4, or 90°;
4. the last angle, beta, is gamma - alpha;

Now, knowing all the angles and a side, we can use the Law of Sines to calculate other sides.

As a brief recap, the Law of Sines tells us that there is an equality between the ratio of a side length and it's opposite angle. More info here: https://en.wikipedia.org/wiki/Law_of_sines

In our case, for the upper left triangle (and the bottom right one), we have:

Remember that AD is our original height.

Given that the sin(gamma) is 1, and we also know the value of AD, we can write the equations:

For the upper right triangle (and the bottom left one), we then have:

Having all needed sides, we can easily calculate the width and height:

width = EA + AF
height = ED + FB

At this point we can write a quite easy method that, given a rectangle and a rotation angle in radians, can return new bounds:

function rotate(rectangle, alpha) {
  const { width: AB, height: AD } = rectangle
  const gamma = Math.PI / 4,
        beta = gamma - alpha,
        EA = AD * Math.sin(alpha),
        ED = AD * Math.sin(beta),
        FB = AB * Math.sin(alpha),
        AF = AB * Math.sin(beta)

  return {
    width: EA + EF,
    height: ED + FB
  }
}

This method can then be used like:

const rect = { width: 30, height: 50 }
const rotation = Math.PI / 4.2 // this is a random value it put here
const bounds = rotate(rect, rotation)

Hope there aren't typos...

这篇关于获取未旋转的旋转矩形的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！