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.

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)]