WPF: Xoay hình chữ nhật và đặt nó trong Canvas

Question

tôi gặp sự cố khi xoay hình chữ nhật và đặt nó trên canvas theo một cách nhất định. Đây là những gì tôi cố gắng để đạt được:

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

Hình chữ nhật lớn trong bức tranh vải của tôi. Hình chữ nhật nhỏ hơn là hình chữ nhật của tôi tôi muốn xoay. Khi tôi xoay hình chữ nhật (hình chữ nhật chấm), nó sẽ bị cắt bớt. Để tránh điều này, tôi muốn định vị lại hình chữ nhật như trong hình ở bên phải.

Đây là cách tôi đã cố gắng nó cho đến nay:

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

tôi nghĩ cách tốt nhất để làm điều này là để tính x và y bù đắp và vị trí hình chữ nhật bằng Canvas.SetLeft và Canvas.SetTop. Nhưng tôi có vấn đề tìm ra cách để làm toán. (Tính toán y dường như hoạt động).

Thực ra tôi muốn đặt một số hình chữ nhật trên canvas ở vị trí ngẫu nhiên. Góc quay có thể là giá trị giữa -45 và 45 độ và kích thước hình chữ nhật cũng có thể là giá trị ngẫu nhiên. Nhưng các hình chữ nhật phải luôn luôn được nhìn thấy hoàn toàn trong khung hình vì vậy tôi cần phải biết các khoảng trống cho các giới hạn của tọa độ vị trí. (Các hình chữ nhật có thể chồng lên nhau.)

Tôi hy vọng bạn hiểu được vấn đề của tôi. Sẽ rất tuyệt nếu bạn có thể giúp tôi.

Answer 1

Giải pháp thực sự đơn giản hơn rất nhiều so với bạn có thể đoán được. Thay vì sử dụng RenderTransform, hãy sử dụng LayoutTransform để thay thế. Nó có cùng các loại biến đổi nhưng thay vì áp dụng chúng cho kết quả đầu ra của phần tử trong quá trình kết xuất, nó thay đổi không gian bố trí của phần tử trong khi vượt qua bố cục. Vì vậy, XAML sau tạo ra kết quả bạn đã cho thấy trong ví dụ thứ hai trong ảnh chụp màn hình của bạn.

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

Lưu ý rằng điều này không hoạt động trong Silverlight vì Silverlight không hỗ trợ LayoutTransform.