Custom and custom rotating shapes on canvas with WPF

Question

I am currently creating drawing software using WPF Shapes on canvas.

I created a system that allows the user to move and rotate shapes on the canvas using a transparent canvas on the shape (which rotate with the shape):

The green dot is used to rotate the shape, the blue area on the rectangle is used to move the shape. I would like to use 4 red dots to resize the shape.

But the shape rotates, so the coordinates of the corners do not fully correspond to the change in shape. It seems, in my opinion, to matter only if the rotation is 0, because the upper left corner can be lower right after 180 degrees rotation.

I am now using RotateTransform to achieve rotation using 0.5, 0.5 RenderTransformOrigin . I would like to avoid using ScaleTransform because I want to keep StrokeThickness in the size that it has.

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

How to use deltas to change shape, even if it is rotated or moved?

Answer 1

You can use the delta to resize the shape if it is rotated. The only thing you need to do is also rotate the mousemovement. As you can see:

vectorrotate http://s1.directupload.net/images/140313/ajrbvy55.jpg

The movement of the mouse from source to location describes a two-dimensional vector. You can rotate this vector mathematically 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 beginning of the resizing and theta is the rotation angle that can be found in the RotateTransform (Angle-Property) of the form. At the moment, I don’t know for sure whether to use this function, because the vector should rotate in the opposite direction.

You can select x '/ y' to calculate the deltas and resize the shape as if it were not rotated.

I have not implemented this myself. This is just a general idea. Maybe I can serve with a little code if you try this and give feedback or ask the problem in more detail or update your question with some code.

Application:

Changing the shape with the delta should be easy if you can access the width and height properties of the form. You simply add / subtract x-delta width to / from and / or add / subtract y-delta to / from height, depending on the capture point. This does not affect the position of the form inside the canvas. Perhaps you need to customize the Canvas.Left / Canvas.Top-Form Property. That is, if the user captures the upper left point and resizes it to the left / up, you must also subtract the delta from the left and upper shape. Otherwise, it will expand to the right / down.