Calculating visible area of a rotated box

Question

I have a box with some text in it as shown in the picture below.

An example of the rotation is shown below, where the rotation is 40 degrees.

Another example of the rotation is shown below, where the rotation is 140 degrees.

I know the start point (upper and lower point) and the end point of the text and the width/height of the margin. It does not necessarily have the same width of the margin on both sizes of the text, but I always know the width of the margin.

In the picture above the rotation angle is set to 0, and it is easy to calculate the visible area, but when it is rotated, I cannot figure out how to calculate the visibile area.

The position is based upon the code above, so as you can see, the text is always visible.

protected override void OnSizeAllocated(double width, double height)
{
   var upperLeft = new Point(Content.Margin.Left + Padding.Left, Content.Margin.Top + Padding.Top);

   var upperRight = upperLeft;
   upperRight.X += width - Content.Margin.HorizontalThickness - Padding.HorizontalThickness;

   var lowerLeft = upperLeft;
   lowerLeft.Y += height - Content.Margin.VerticalThickness - Padding.VerticalThickness;

   var lowerRight = upperRight;
   lowerRight.Y = lowerLeft.Y;

   var rotationPoint = new Point()
   {
      X = (lowerRight.X - upperLeft.X) * AnchorX + upperLeft.X,
      Y = (lowerRight.Y - upperLeft.Y) * AnchorY + upperLeft.Y
   };

   RotatedUpperLeftCorner = CalculateRotatedPoint(upperLeft, rotationPoint);
   RotatedUpperRightCorner = CalculateRotatedPoint(upperRight, rotationPoint);
   RotatedLowerLeftCorner = CalculateRotatedPoint(lowerLeft, rotationPoint);
   RotatedLowerRightCorner = CalculateRotatedPoint(lowerRight, rotationPoint);

   Device.BeginInvokeOnMainThread(() =>
   {
      TranslationX = Math.Min(Math.Min(RotatedUpperLeftCorner.X, RotatedUpperRightCorner.X), Math.Min(RotatedLowerLeftCorner.X, RotatedLowerRightCorner.X)) * (HorizontalOptions.Alignment == LayoutAlignment.End ? 1 : -1);
      TranslationY = Math.Min(Math.Min(RotatedUpperLeftCorner.Y, RotatedUpperRightCorner.Y), Math.Min(RotatedLowerLeftCorner.Y, RotatedLowerRightCorner.Y)) * (VerticalOptions.Alignment == LayoutAlignment.End ? 1 : -1);
   });
}

private Point CalculateRotatedPoint(Point p, Point rotationPoint)
{
   var rotation = GetRotationInRadians();

   var newPointX = Math.Cos(rotation) * (p.X - rotationPoint.X) - Math.Sin(rotation) * (p.Y - rotationPoint.Y) + rotationPoint.X;
   var newPointY = Math.Sin(rotation) * (p.X - rotationPoint.X) + Math.Cos(rotation) * (p.Y - rotationPoint.Y) + rotationPoint.Y;

   return new Point(newPointX, newPointY);
}

But does anyone have an idea of how to calculate the visible area? The text can be in all 4 corners

Answer 1

While it is still unclear to me how you generate the size and location of the yellow rectangle, as long as you know the coordinates of its vertices, and the coordinates of the larger fixed rectangle, that's enough.

As I said in my comment, you can find the vertices of the polygon created by the intersection of the two rectangles via the Sutherland–Hodgman algorithm. Using the notation in the link, the fixed rectangle would be the clip polygon and the yellow rectangle would be the subject polygon. The algorithm basically throws away vertices of the subject polygon which are not in the intersection and generates new vertices where the clip polygon cuts the subject polygon.

Once you have the vertices of the intersection polygon you can easily calculate the area.