User-Resizable and User-Rotatable shapes on Canvas with WPF

Question

I'm currently creating a drawing software using WPF Shapes on canvas.

I've created a system allowing the user to move and rotate shapes on a Canvas using a transparent canvas upon the shape (which rotate with the shape) :

The current system

The green point is used to rotate the shape, the blue zone upon the rectangle is used to move the shape. I'd like to use my 4 red points to re-size the shape.

But the shape is rotatable, so corners coordinates aren't completely relevant to resize the shape. It seems, in my opinion, to be relevant only if the rotation is equals to 0, because the Left-Top Corner can be the Bottom-Right one after a 180 degree rotation.

Right now I'm using a RotateTransform to achieve the rotation with a 0.5, 0.5 RenderTransformOrigin. I'd like to avoid the use of a ScaleTransform because I want to keep the StrokeThickness at the size it is.

All red dots are pseudo-draggable (using MouseDown, MouseMove, MouseUp events). I use a buffer point which gives me the delta in X and Y between two mouse events.

How can use the deltas to resize the shape, even if it is rotated or moved ?

I'll come back to this tomorrow, but there are two solutions to this. The first is to stop binding the dots to the corner of the object and instead put them on the rectangular bounds. This may be much more logical if you intend to have complex shapes (especially shapes with non-convex hulls). The second idea here is to find the middle of your shape, use it as an origin, and take the selected scale point as starting reference for a scale vector, and then scale ALL points with reference to the origin (so the entire shape scales in ALL directions, not just the one you are stretching.) — Firoso
I'm trying to apply the second method you said, can you provide me a sample? — Bahaïka
You probably want to use Adorners. This may help - codeproject.com/Articles/22952/WPF-Diagram-Designer-Part — Phil
I want to do a similar thing in wpf. Can you please provide your code of how you rotated and resized etc ? — mrid

Martin Tausch Martin Tausch · Accepted Answer · 2014-03-13T12:56:57

You can use the deltas to resize the shape if it is rotated. The only thing you have to do is rotating the mousemovement either. As you can see:

The movement of the mouse from origin to location describes a 2-D-vector. You can rotate this vector mathematically by using this formula:

x' = cos(theta) * x - sin(theta) * y

y' = sin(theta) * x + cos(theta) * y

where x/y is the current location of the mouse relative to the origin of the resize and theta the angle of rotation which can be found in the RotateTransform-object (Angle-Property) of the shape. At this point I don't know exactly if you have to use -theta, because the vector has to rotate in the opposite direction.

You can pick x'/y' for calculating the deltas and resize the shape like if it wasn't rotated.

I did not implement this myself. This is just a general idea. Maybe I can serve with a little code if you try this and give feedback or specify the problem more deeply or update your question with some code.

Appendix:

Resizing the shape using the deltas should be easy if you can access the width- and height-property of the shape. You simply add/subtract the x-delta to/from width and/or add/subtract the y-delta to/from height, depending on the grabbed point. This isn't affected by the location of the shape within the canvas. Maybe you have to adjust the Canvas.Left/Canvas.Top-Property of the shape. I.e. if the user grabs the left upper point and resizes it to left/up, you should subtract the deltas from left and top porperty as well. Otherwise it will expand to right/down.

User-Resizable and User-Rotatable shapes on Canvas with WPF

1 Answers