Rectangular coordinates taking into account the angle of rotation

Question

I am trying to create custom components on Android using Surfaceview and canvas drawing. The components are re-significant and can rotate when touched. Consider creating an image, its top, right, bottom, and left edges are scaled by touching and dragging the desired edge. I use RectF to preserve component boundaries. For rotation I use the canvas.rotate(angle, bounds.centerX(),bounds.centerY()) method canvas.rotate(angle, bounds.centerX(),bounds.centerY()) . The problem is resizing the top edge, Let, Right and Bottom edges must be fixed, and I cannot fix them if the rotation angle is other than 0 degrees. I need a math solution to find out the x, y coordinates of the rotated rectangle relative to the actual borders of the rectangle.

I can explain this with some images. The following figure shows two rectangles whose borders are also known and displayed in their respective colors. Consider the green Rect as the initial boundary of the components, i.e. rotated -45 degrees, Center (10.10) . Now let's move on to the size of the top edge of the rectangle and appear in the next figure 2.

From Figure 2 it is clear that the Y position is reduced to 4 out of 6. The rotating rectangle is also shown in pink. Remember that I am resizing when the component is at an angle of rotation of -45 degrees, so when dragging the Top edge of the rectangle Do not change the position of "Left", "Right" and "Down" . Thus, Figure 2 The pink rectangle should have left, right, and bottom coordinates , such as Figure 1 The green rectangle . A comparison of the resulting and expected rectangles is shown in Figure 3.

In Figure 3, the yellow rectangle is the expected / required output. The resulting rectangle. The pink color is shifted up compared to the green rotary rectangle and changes depending on the angle of rotation .

• I have a rotation angle = -45 degrees
• The bounds of the actual (not resized) rectangle.
• The boundaries of the actual rectangle with the rectangle during rotation = -45 degrees.
• The borders of the Re-size rectangle.
• The borders of the Re-size rectangle during rotation = -45 degrees.

How to calculate the Borders / Center of a yellow rectangle. So that I can resize my components correctly? Let me know if there is any math that can be applied?

The necessary points / coordinates are marked as red circles in Figure 3.

Answer 1

The key is: "I can’t fix it if the rotation angle is other than 0 degrees."

Say your rectangle is rotated 10 degrees.

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

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

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

3) Now perform manipulations with the rectangle. The center of the rectangle moves.

4) Rotate the new center of the rectangle 10 degrees

Thus, you do not need to think about it, and you always work in non-rotating coordinates.

The point in [x, y] , rotated through the angle a , ends in [x*cos(a) - y*sin(a), x*sin(a) + y*cos(a)]

Answer 2

All colors in this answer refer to your drawing 3.

If I understand your question correctly, you know how to calculate all the details about the pink rectangle, as well as the green rectangle. So just take the difference between one corner of the pink rectangle and the corresponding corner of the green rectangle. Adding this difference (two-element vector, i.e., the difference between x and y separately) to the center of the pink rectangle, you get the desired center of the yellow triangle.

If you also need to calculate the sizes of the pink rectangle, you can do this in a non-rotating coordinate system. Take the green rectangle along with the coordinates of the point to which you want to expand the rectangle, and rotate them back + 45 °. Then you can increase the height of the rectangle to the desired value, which will give you a blue rectangle, and from there - the rotation of the pink rectangle.