Resize handles on a rotated element

Question

I am trying to place the cutting handles on the four corners of a rectangle, which you can drag to resize the rectangle. I'm having trouble calculating the new width, new height and new points of the rectangle after I dragged one of the rectangular points.

If the rectangle had not been rotated, it would obviously be very simple, because the width and height would change the same as the mouse offset X and offsetY. However, this CAN rectangle can be rotated, so offsetX and offsetY do not correspond to changes in width / height.

In the image above, I presented the information that I already have in black and the information I want to find in light gray. I tried to show how the rectangle should change if I dragged the a1 corner up and to the right.

Can someone help me figure out how to calculate the missing information?

Thanks for any help! It is very much appreciated.

-

EDIT: I have drag and drop, drag and drop end callbacks to each handle. My current code just gets a new point (in this example, a2). Unfortunately, this simply moves the handle, which we are now dragging to a new position, but obviously does not affect the width / height of the rectangle and the position of its other points. What I hope to get help with is how to calculate the new width and height, as well as the new position of the other points based on this resistance.

Handle coordinates (before dragging)

handles: { a: { x: 11, y: 31 }, b: { x: 44, y: 12 }, c: { x: 39, y: 2 }, d: { x: 6, y: 21 } }; 

Callbacks:

 // Save the original x and original y coordinates // of the handle, before dragging onDragStart: function(x, y, handle) { handle.data({ ox: x, oy: y }); } // While dragging the handle, update it coordinates to // reflect its new position onDragMove: function(dx, dy, handle) { handle.attr({ x: handle.data('ox') + dx, y: handle.data('oy') + dy }); } // Not currently using the drag end callback onDragEnd: function(x,y,handle) {} 

Answer 1

http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Distance_between_two_points gives you a method for finding lengths from a1 to a2

 var len=Math.sqrt(Math.pow(a2x-a1x,2)+Math.pow(a2y-a1y,2)); 

Then look at the triangle formed by the intersection of the gray and black lines (Let's call this point H) and a1 and a2. You can use trigonometry to solve. Thus, the angle formed by the d1-c1 line with the bottom allows you to call the rotation angle (R). This means that R is equal to the angle at a2, and the angle at a1 is 90-R. To find the parties you go

 //line from a2 to H var hDif=Math.sin(R)*len; //line from a1 to H var wDif=Math.cos(R)*len; 

Then you can use them to find a new length and height. There will be a few more calculations to see if you add or subtract them from the old width and height.

Answer 2

I have another idea:

Note that your rectangle is rotated 30 degrees counterclockwise relative to the origin.

When the user clicks on one of the edges or corners, do the following:

1) Let StartPt = start point of the mouse.
2) Get the point where the mouse is moving. Let it be EndPt.
3) Rotate each of the vertices of the rectangle by -30 so that it now becomes a non-rotating rectangle. (Do not draw a non-rotating rectangle, it is for calculation purposes only)
4) Turn StartPt and EndPt by -30 degrees. Calculate the change in the width and height of the rectangle when the point is.
5) Add the change to the rotated vertices of the rectangle.
6) Rotate the vertices of the rectangle by +30 degrees. Now draw a rectangle.

https://www.experts-exchange.com/questions/24244758/How-can-let-a-user-drag-to-resize-a-rotated-rectangle.html#answer23964155