Rectangle Coordinates With Respect To The Rotation Angle

Question

I am trying to create custom components in Android using Surfaceview and canvas drawing. The components are re-sizable and rotatable by touching. Consider creating an image view its Top,Right,Bottom, and Left edges are scalable by touching and dragging the required edge. I am using RectF to keep the bounds of the component, For rotation I am using canvas.rotate(angle, bounds.centerX(),bounds.centerY()) method. The problem is while resizing top edge, the Let , Right and Bottom edges should be fixed, and I cannot able to fix it if the rotation angle is other than 0 degrees. I need a math solution to find out the x,y coordinates of a rotated rectangle with respect to the actual rectangle's bounds.

I can explain it with the help of some images. The following Figure displays two rectangles whose bounds are also known and displayed in respective colors. Consider the Green Rect as the components initial bounds, ie. rotated by -45 Degrees, Center is (10,10). Now going to re-size the Top edge of the rectangle and displayed in next Figure 2.

From the Figure 2 it is understood that the Y position is reduced to 4 from 6. The rotated Rectangle is also shown in pink color. Remember I am doing resizing while the component is at rotation angle -45 degrees, so while dragging Top Edge rectangle's Left, Right and Bottom positions should not be changed. So the Figure 2's Pink Rectangle should have Left, Right, and Bottom coordinates same as Figure 1's Green Rectangle. Comparison of the obtained and expected rectangle is shown in Figure 3.

In Figure 3 the yellow color rectangle is the Expected/Required out put. The obtained rectangle Pink color is shifted upwards compared to the Green rotated rectangle and that is varying depends on the Angle of rotation.

• I have rotation angle = -45 degree
• Bounds of Actual (Not re-sized) rectangle.
• Bounds of Actual (Not re-sized) rectangle at Rotation = -45 degrees.
• Bounds of Re-sized rectangle.
• Bounds of Re-sized rectangle at Rotation = -45 degrees.

How do I calculate the Bounds / Center of the Yellow Rectangle. So that I can implement the resizing of my components correctly? Let me know is there is any mathematics that can be applied?

The required points / coordinates are marked as Red color circles in Figure 3.

Jane

Just rotate points, Basic formulas are: x_ = x * cos(angle) - y * sin(angle); y_ = y * sin(angle) + y * cos(angle); en.wikipedia.org/wiki/Rotation_(mathematics) – Gribble

Answer 1

The key is this: "I cannot able to fix it if the rotation angle is other than 0 degrees."

Let's say your rectangle is rotated 10 degrees.

1) rotate the mouse coordinate around some point on the screen by -10 degrees

2) rotate the center of the rectangle by -10 degrees

... now you reduced the problem to a rectangle that is at 0 degrees. The rectangle moved, yes, the mouse moved, but they are relative to each other as they should be.

3) Now do the the rectangle manipulation. The rectangle center will shift.

4) Rotate the new rectangle center by 10 degrees

This way you do not have to think about it and you are always working in un-rotated coordinates.

Point at [x, y] rotated by angle a will end up at [x*cos(a) - y*sin(a), x*sin(a) + y*cos(a)]

Egad

Answer 2

All colors in this answer refer to your figure 3.

If I understood your question correctly, you know how to compute all the details about the pink rectangle as well as the green rectangle. So simply take the difference between one corner of the pink rectangle and the corresponding corner of the green rectangle. Adding that difference (a two-element vector, i.e. x and y difference separately) to the center of the pink rectangle will give you the desired center of the yellow triangle.

If you need to compute the dimensions of the pink rectangle as well, you might want to do so in the unrotated coordinate system. Take your green rectangle together with the coordinates of the point towards which you want to extend the rectangle, and rotate them back by +45°. Then you can extend the height of the rectangle to the value you desire, which will give you the blue rectangle, and from that by rotation the pink rectangle.

Excite