locked
How to resize a rotated canvas? RRS feed

  • Question

  • Hi, I have an urgent questions on how to resize a canvas.On my project, I created a canvas which could be rotated (rotateTranform) according to its center. And on the right bottom corner, I create a user control area to capture the pressed Mouse postion changes to calcualte the dx and dy and thus change the Width and Height of the canvas.

    If the rotation angle is 0, everything is fine, and you can image, the canvas can be resized by moving the bottom right corner.

    However, if the rotation angle is 180, for instance, I found dragging the user control area (it is now on the top left ) still cause the resizing of the bottom right of the canvas, which is exactly not what I want. I want the canvas can be changed according to the position of the user control, for example, if the user control area is at the top left, the canvas should be expanded by moving the top left corner.

    Is there any solution for this problem? Thank you very much

    Xin

    alex wang
    Tuesday, October 7, 2008 8:56 PM

Answers

  • A couple of things that might help:

    1. Layout transform is applied at a different point of the rendering process to a RenderTransform. A layout transform is performed before layout, therefore if you rotate a button using a layout transform, it's neighboring  controls will be re-arranged as a result. A render transform is applied after layout, and hence will have no impact on other controls.

    2. Transformation order is VERY important!

    If you have a rectangle who's centre is at (0,0), that you wish to rotate 90 degrees, with a centre of rotation at (0,0), and offset by 50 units along the X axis ...

    If you rotate then offset, your rectangle will be rotated 90 degress then offset by 50 units so will be at the location (50,0)

    If you offset then rotate, your rectangle will first be offset to (50,0), however the rotation step (which is centred at (0,0)) will effectively result in your rectangle being both rotated and moved to (0,50).

    A big difference!

    Regards,
    Colin E.
    • Proposed as answer by Marco Zhou Friday, October 10, 2008 8:34 AM
    • Marked as answer by Jim Zhou - MSFT Tuesday, October 14, 2008 9:49 AM
    Wednesday, October 8, 2008 2:07 PM

All replies

  • Hi,

    I suspect the problem is the order in which you are applying your transfrmations.  Can you please provide some example code which can be used to reproduce the problem?

    Colin E.
    Wednesday, October 8, 2008 4:35 AM
  • Hi, Colin, I really appreciate your reply. Actually my UIElement is a card, at the bottom right corner I placed a User Control Area to detact the dragged mouse event, so that I can enlarge the card.

    Since the UI elment is a canvas, I just add or reduce the Width and Height directly to change its size. The card is added to another big canvas just like put on a table surfacee (actually I am programming for a digital tabletop application). I am not using Adonerlayer to change the size, I just add and reduce the width and height of the card canvas manually.

    I am using a group of transformation to show the card. I use TranslateTransformation to change the card position (NOT canvas.setLeft, canvs.setTop). I am using rotateTransformation to rotate the card. However, when I change its size. It worked wired when the roation angle is not 0.

    The example is. if the card is rotated 180 degree. this time, I dragged its top left corner (because this time the User Control which was orignially at the bottom right corner when it was rotation Angle 0 has been rotated to the top left) the card will still expand from the bottom right corner. It is so wired.

    Much worse, If you change the rotation angle to 90 for example, the resize not only cause the card area changed, but make it move!!!!!!!!

    I am totally confused and cannot finger out what happend. According to my analysis, is it because I am using the transmation not Canvas.setLeft? So that the card, invisibly is always on the top left size of the parent canvas and everything I have seen is illusion produced by transmation group?  Or is there any invisible bounding box that cause the wired movement and unexpected resize orientation? 

    I am confused. HELP!

    I have attached some codes to indicate how I initialize the transmation group. I do not know it is important for the order of transmation. May be you can teach me something, I really appreicate!

    Xin 


           protected void InitializeTransformations()
            {
                group = new TransformGroup();
                rotate = new RotateTransform(0);
                scale = new ScaleTransform(1,1);
                skew = new SkewTransform(0, 0);
                trans = new TranslateTransform(0, 0);

                //add the transformations to the TransformGroup
                group.Children.Add(rotate);
                group.Children.Add(scale);
                group.Children.Add(skew);

                //for whatever reason: keep trans as the last transformation
                //or the whole thing blows up!
                group.Children.Add(trans);

                //now all transformations are connected
                //to this card
                RenderTransform = group;
            }


    alex wang
    • Edited by xdxiaoxin Wednesday, October 8, 2008 11:31 AM
    Wednesday, October 8, 2008 11:27 AM
  • Hi

    I had a similar issue (though not exact to your scenario) - I'm not 100% but I see you are using a RenderTransform - have you tried a LayoutTransform?  The layout type worked for me in ways the render did not.

    Hope this helps


    Paul
    Wednesday, October 8, 2008 11:36 AM
  • Seems it still does not work, However, it might be some problems from my code. BTW. is it very important to set the order of transformation?

    Am I using a right order to initialize it ? And should I set a correct tranformation for its(the cards' ) parent canvas?

    alex wang
    Wednesday, October 8, 2008 12:06 PM
  • Well, Seems I have to combine the layoutTransform with the Canvas.SetLeft and SetTop, Not sure, but, well, it is still a big problem.

    alex wang
    Wednesday, October 8, 2008 1:54 PM
  • A couple of things that might help:

    1. Layout transform is applied at a different point of the rendering process to a RenderTransform. A layout transform is performed before layout, therefore if you rotate a button using a layout transform, it's neighboring  controls will be re-arranged as a result. A render transform is applied after layout, and hence will have no impact on other controls.

    2. Transformation order is VERY important!

    If you have a rectangle who's centre is at (0,0), that you wish to rotate 90 degrees, with a centre of rotation at (0,0), and offset by 50 units along the X axis ...

    If you rotate then offset, your rectangle will be rotated 90 degress then offset by 50 units so will be at the location (50,0)

    If you offset then rotate, your rectangle will first be offset to (50,0), however the rotation step (which is centred at (0,0)) will effectively result in your rectangle being both rotated and moved to (0,50).

    A big difference!

    Regards,
    Colin E.
    • Proposed as answer by Marco Zhou Friday, October 10, 2008 8:34 AM
    • Marked as answer by Jim Zhou - MSFT Tuesday, October 14, 2008 9:49 AM
    Wednesday, October 8, 2008 2:07 PM
  •  Thank you colin,

    I bascially found the reason for the resize orientation problem. It is caused by the dynamic changes of my rotation Center

    In my code, I wrote:

    Resize(dx, dy)
    {
        UI.Width +=dx;
        UI.Height += dy;
       RefitCenter(dx, dy);
    }


    RefitCenter(dx, dy)
    {
       //rotate is an instance of RotateTransformation
        rotate.CenterX +=dx;
       rotate.CenterY +=dy;
    }

    if I commented RefitCenter, I found the wired problem will be disappear although the rotation angle will not be refitted.

    However, if I refit the rotation.Center after all the resize has been done, I found the UI elment(a rectangle card) will move automatically to the orignial position where it is located before the resize,

    I think I have been very near to the final solution of the problem.
    alex wang
    Friday, October 10, 2008 4:09 PM