WPF: Gire el rectángulo y colóquelo en el lienzo

Question

tengo un problema con girar un rectángulo y colocarlo en un lienzo de cierta manera. Esto es lo que trato de lograr:

Rotated Rectangles http://www.freeimagehosting.net/uploads/79844652d2.jpg

El gran rectángulo en la imagen es mi lienzo. El rectángulo más pequeño es mi rectángulo que quiero rotar. Cuando giro el rectángulo (rectángulo punteado), se recorta, por supuesto. Para evitar esto, quiero reposicionar el rectángulo como en la imagen en el lado derecho.

Así es como he probado hasta ahora:

Rectangle rect = new Rectangle(); 
rect.Width = 100; 
rect.Height = 50; 
int angle = 30; 
rect.RenderTransform = new RotateTransform(angle, rect.Width/2, rect.Height/2); 
canvas.Children.Add(rect); 

double x = Math.Cos(30) * (rect.Width/2) + Math.Sin(30) * (rect.Height/2) - rect.Width/2; 
double y = Math.Sin(30) * (-rect.Width/2) + Math.Cos(30) * (rect.Height/2) - rect.Height/2; 
Canvas.SetLeft(rect, x); 
Canvas.SetTop(rect, y); 

pensé que la mejor manera de hacer esto es calcular el desplazamiento X e Y y la posición del rectángulo Canvas.SetLeft y Canvas.SetTop. Pero tengo problemas para averiguar cómo hacer las matemáticas. (El cálculo de y parece funcionar).

En realidad, quiero colocar varios rectángulos en el lienzo en posiciones aleatorias. El ángulo de rotación puede ser un valor entre -45 y 45 grados y los tamaños de rectángulo también pueden ser valores aleatorios. Pero los rectángulos siempre deben ser completamente visibles en el lienzo, así que necesito conocer los desplazamientos para los límites de las coordenadas de posición. (Los rectángulos podrían solaparse.)

Espero que entiendas mi problema. Sería bueno si puedes ayudarme.

Answer 1

La solución es en realidad mucho más simple de lo que imaginaba. En lugar de usar RenderTransform, use LayoutTransform en su lugar. Toma los mismos tipos de transformaciones, pero en lugar de aplicarlos a la salida representada del elemento durante el pase de representación, altera el espacio de diseño del elemento durante el pase de disposición. Entonces, el siguiente XAML produce el resultado que mostró en el segundo ejemplo en su captura de pantalla.

<Canvas Width="640" Height="480"> 
    <Rectangle Fill="Blue" Width="200" Height="80"> 
     <Rectangle.LayoutTransform> 
      <RotateTransform Angle="-45"/> 
     </Rectangle.LayoutTransform> 
    </Rectangle> 
</Canvas> 

Tenga en cuenta que esto no funciona en Silverlight porque Silverlight no es compatible con LayoutTransform.