Jquery ui resizable: resize rotated objects

Question

Problem:

JQuery-ui-resizable does not work correctly for rotated objects. After turning the element, the handles do the same as on the non-rotating element.

Idea:

Perhaps the axis will be rotated in accordance with the rotation matrix ( http://en.wikipedia.org/wiki/Rotation_matrix ). Therefore, I think we can update the coordinates of the mouse with x' = x*cos(a) -y*sin(a); y' = x*sin(a) + y*cos(a) x' = x*cos(a) -y*sin(a); y' = x*sin(a) + y*cos(a) .

Has anyone seen a similar solution (patch or a separate jQuery plugin for resizing)? Can someone give me some advice if I rewrote the _mouseStart and _mouseDrag jquery.ui.resizable methods?

Answer 1

Well, finally, I returned to my problem and got some progress: https://github.com/andyzee/jquery-resizable-rotation-patch I decided not to use the rotation matrix right now (although it really works), but to switch handlers

 function switchAxis(axis, angle) { while(angle >= 360) angle = 360-angle; while(angle < 0) angle = 360+angle; var axisArray = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]; var octant = Math.round(angle/45); // 0 .. 7 var index = 0; if ( [].indexOf ) { index = axisArray.indexOf(axis); } else { for(var i=0; i<axisArray.length; i++) { if (axisArray[i] === axis) index = i; } } var newAxisIndex = (index + octant) % 8; return axisArray[newAxisIndex]; } 

I will definitely continue my search and probably write my own solution.

Answer 2

Here the patch that I developed based on Andy Zee works

Jsfiddle

This basically changes dx, dy based on the angle

 ndx = dx * Math.cos(angle_rad) + dy * Math.sin(angle_rad); ndy = dy * Math.cos(angle_rad) - dx * Math.sin(angle_rad); 

It also changes the behavior of the handles and corrects the position caused by the resizing of the rotated element ( posted here )