title: Rectangle Coordinates With Respect To The Rotation Angle
body: <p>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 <code>RectF</code> to keep the bounds of the component, For rotation I am using <code>canvas.rotate(angle, bounds.centerX(),bounds.centerY())</code> 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.</p>
  
  <p>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. <strong>Consider the Green Rect as the components initial bounds, ie. rotated by -45 Degrees, Center is (10,10)</strong>. Now going to re-size the <strong>Top edge</strong> of the rectangle and displayed in next Figure 2. </p>
  
  <p><img src="https://i.stack.imgur.com/FjGjZ.png" alt="Figure 1"></p>
  
  <p>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 <strong>Top Edge</strong> rectangle's <strong>Left, Right and Bottom positions should not be changed</strong>. So the <strong>Figure 2's Pink Rectangle</strong> should have <strong>Left, Right, and Bottom coordinates</strong> same as <strong>Figure 1's Green Rectangle</strong>. Comparison of the obtained and expected rectangle is shown in Figure 3.</p>
  
  <p><img src="https://i.stack.imgur.com/nEABx.png" alt="Figure 2"></p>
  
  <p>In Figure 3 the <strong>yellow color rectangle is the Expected/Required</strong> out put. The <strong>obtained rectangle Pink color</strong> is shifted upwards compared to the <strong>Green rotated rectangle and that is varying depends on the Angle of rotation</strong>. </p>
  
  <ul>
  <li>I have rotation angle = -45 degree</li>
  <li>Bounds of Actual (Not re-sized) rectangle.</li>
  <li>Bounds of Actual (Not re-sized) rectangle at Rotation = -45 degrees.</li>
  <li>Bounds of Re-sized rectangle.</li>
  <li>Bounds of Re-sized rectangle at Rotation = -45 degrees.</li>
  </ul>
  
  <p><strong>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?</strong></p>
  
  <p><strong>The required points / coordinates are marked as Red color circles in Figure 3.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/aQf3D.png" alt="Figure 3"></p>