WPF InkCanvas: Rectangle Stroke Skewed after Rotate, Resize and Back to original positon RRS feed

  • Question

  • Hi Team,

    I am developing Drawing tool using WPF inkcanvas. The goal is to rotate and resize independently X & Y axis and both axis as well. However, the shape should not be changed.

    1. I had Drawn Rectangle using ink mode/Generate StrokeCollection points and assign the collection to the inkcanvas strokes property.

    2. Select the rectangle and Rotate at an angle(say 30 deg) using RotateAt method of Matrix class

    3. Resize the Rectangle(NOT proportional) by dragging resize handle on the default selected stroke adorner layer.

    4. Rotate back to the previous angle(say -30 deg)

    Now, the Rectangle shape is deformed/skewed.

    Query 1: How should I retain the shape after doing the above steps?

    I even tried with custom adorner layer. However, the default selected rect bounds is still visible.

    Query 2: Is it possible to make default rect bounds invisible still stroke selected?

    Quer 3: Is there any solution to achieve this using custom Adorner Layer? If so , please provide pseudo/sample code for this.

     Kindly help me to get rid of this issue.

    Thanks in Advance.


    Ravichandran, O.S.

    Monday, June 4, 2012 12:11 PM

All replies

  • Hi Ravichandran,

    How do you rotate the Rectangle? We need code detail to find the root cause of your issue.

    And do you have checked this sample with Adorner to Rotate move and resize shape in Canvas:

    I think this is what you want.

    Thank you.

    Have a nice day.

    Annabella Luo[MSFT]
    MSDN Community Support | Feedback to us

    Wednesday, June 6, 2012 7:55 AM
  • Hi Annabella,

    Thanks for valuable link. I expected the same feature as in the link to be work for Ink Canvas strokes.

    Reference code which I follow in my drawing tool is - I used this Adorner class for InkCanvas instead of InkPresenter in the sample code.

    I added the below code in the InkCanvas SelectionChanged event because I want to rotate/resize only the selected strokes

    // Add the rotating strokes adorner to the InkPresenter.
    adornerLayer = AdornerLayer.GetAdornerLayer(inkPresenter1);
    adorner = new RotatingStrokesAdorner(inkPresenter1);


    By default, there will be Rectangle bounds with 8 resize handle created while selecting the strokes. Also, RotatingStrokesAdorner layer will also be created with thumb for rotate handle.

    What I am doing is that Resize the selected stroke(s) horizontally using the rect bounds handle. Now, Rotate using the Thumb handle to some angle say 45deg. RotatingStrokesAdorner Rearrange the structure. However, default Rectangle bounds changed to fit the rotated stroke size and is NOT rotating(i hope it is the dafault behavior) as RotatingStrokesAdorner. Again resize the same selected stroke(s) as did before. Atlast, rotate it back to original angle (or rotate to -45deg).

    My problem comes here. The shape of the selected stroke(s) does not maintain after doing the above steps.

    The reference link which you provided was working for child element(UI Element/Framework Element). My need is to do the same for strokes in inkcanvas element. If it is possible to make the code in the reference link to work with ink strokes, kindly let me know how and where to tune the code?

    Thanks in Advance.

    Ravichandran, O.S.

    Thursday, June 7, 2012 9:34 AM
  • Hi Ravichandran,

    This thread has been created for a long time, I suggest you to create a new thread so that other member can easily find your new question to help you.

    Thank you for your understanding and support.

    Have a nice day.

    Annabella Luo[MSFT]
    MSDN Community Support | Feedback to us

    Thursday, June 7, 2012 9:48 AM
  • Hi Annabella,

    Thanks for your response.

    Ravichandran, O.S.

    Thursday, June 7, 2012 3:45 PM
  • You're welcome, Ravichandran.

    Annabella Luo[MSFT]
    MSDN Community Support | Feedback to us

    Friday, June 8, 2012 5:49 AM