drawing bounding rectangle around rotated UI Elements
-
I'm developing editor application in WPF. It is somewhat similar to Microsoft visio. It supports the rotation of multiple elements placed on the editor canvas. I'm rightnow facing a problem in drawing a adorner (bounding rectangle) around the multiple objects. Let me describe the problem in detail : Each element placed in the editor will display the adorner to do operation like resize, rotation etc. When multiple elements are selected, adorner (rectangle) will be drawn covering all the objects. When elements are not rotated, drawing adorner (rectangle) is not a problem. But when elements are rotated at some degree, I also will have to draw the adorner (rectangle) in rotated position. In rotated position if I do the resize operation then I'm not able to place the adorner properly i.e. exactly surrounding to elements. Can any one pls help me on how I can draw the proper adorner (bounding rectangle) after each resize operation in rotated position? I hope I'm clear with my question. If not pls ask for clarification of see how multiple object rotation works in Visio. I have run out of idea on how to fix this problem so looking forward to have some help/suggestions from members. Regards,
-
I'm developing editor application in WPF. It is somewhat similar to Microsoft visio. It supports the rotation of multiple elements placed on the editor canvas. I'm rightnow facing a problem in drawing a adorner (bounding rectangle) around the multiple objects. Let me describe the problem in detail : Each element placed in the editor will display the adorner to do operation like resize, rotation etc. When multiple elements are selected, adorner (rectangle) will be drawn covering all the objects. When elements are not rotated, drawing adorner (rectangle) is not a problem. But when elements are rotated at some degree, I also will have to draw the adorner (rectangle) in rotated position. In rotated position if I do the resize operation then I'm not able to place the adorner properly i.e. exactly surrounding to elements. Can any one pls help me on how I can draw the proper adorner (bounding rectangle) after each resize operation in rotated position? I hope I'm clear with my question. If not pls ask for clarification of see how multiple object rotation works in Visio. I have run out of idea on how to fix this problem so looking forward to have some help/suggestions from members. Regards,
RenderTransform.TransformBounds returns an axis aligned rectangle, if that isn't what you want try http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx If your using Canvas.SetLeft/Top instead of a TranslateTransform you may have to tweak it.
Rectangle rotated = new Rectangle {Width = 100, Height = 60, Fill = Brushes.Orange};
rotated.RenderTransform = new TransformGroup {Children = {new RotateTransform(35), new TranslateTransform(60, 30)}};
canvas.Children.Add(rotated);//GetDescentandBounds was returning empty, your elements are probably all loaded.
rotated.Loaded += ((s, e2) =>
{
//Bounds before render transform.
Rect r = VisualTreeHelper.GetDescendantBounds(rotated);
//After transform
r = rotated.RenderTransform.TransformBounds(r);Rectangle border = new Rectangle {Width = r.Width, Height = r.Height, Stroke = Brushes.DodgerBlue, StrokeThickness = 2, RenderTransform = new TranslateTransform(r.X, r.Y)}; canvas.Children.Add(border); }); -
RenderTransform.TransformBounds returns an axis aligned rectangle, if that isn't what you want try http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx If your using Canvas.SetLeft/Top instead of a TranslateTransform you may have to tweak it.
Rectangle rotated = new Rectangle {Width = 100, Height = 60, Fill = Brushes.Orange};
rotated.RenderTransform = new TransformGroup {Children = {new RotateTransform(35), new TranslateTransform(60, 30)}};
canvas.Children.Add(rotated);//GetDescentandBounds was returning empty, your elements are probably all loaded.
rotated.Loaded += ((s, e2) =>
{
//Bounds before render transform.
Rect r = VisualTreeHelper.GetDescendantBounds(rotated);
//After transform
r = rotated.RenderTransform.TransformBounds(r);Rectangle border = new Rectangle {Width = r.Width, Height = r.Height, Stroke = Brushes.DodgerBlue, StrokeThickness = 2, RenderTransform = new TranslateTransform(r.X, r.Y)}; canvas.Children.Add(border); });Dave, thanks for the reply. But above code draws the border around the element in the upright position. I want to draw the bounding rectangle (border object in your code snippet) around elements in rotated position if elements are in rotated position. So I think with your code I can not realize rotated bounding rectangle. Can you pls elaborate more. regards
-
Dave, thanks for the reply. But above code draws the border around the element in the upright position. I want to draw the bounding rectangle (border object in your code snippet) around elements in rotated position if elements are in rotated position. So I think with your code I can not realize rotated bounding rectangle. Can you pls elaborate more. regards
I also posted a link to http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx. In the picture at the top of the article the bottom left item has a rotated border perhaps that does what you want? If you do border.RenderTranform = rotated.RenderTransform, it would have the rotated border but I think it would require more work than that for your situation.
-
I also posted a link to http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx. In the picture at the top of the article the bottom left item has a rotated border perhaps that does what you want? If you do border.RenderTranform = rotated.RenderTransform, it would have the rotated border but I think it would require more work than that for your situation.
well, rotating for single component is not a problem. That is already done by me. The complexity comes into the picture when multiple components are selected and rotated. Also, the difficult thing is to show the perfect bounding rectangle after these rotated objects are resized. If you have any idea how to resize the rotated components (multiple) pls share with me. regards,