Question

问题：

Jquery-ui-resizable似乎不适用于旋转对象。在旋转元素之后，手柄执行与未旋转元素相同的操作。

想法：

轴可能会根据旋转矩阵（http://en.wikipedia.org/wiki/Rotation_matrix）旋转。所以我想我们可以使用x' = x*cos(a) -y*sin(a); y' = x*sin(a) + y*cos(a)更新鼠标坐标。

有没有人见过类似的解决方案（补丁或用于调整大小的独立jquery插件）？如果我要重写jquery.ui.resizable的_mouseStart和_mouseDrag方法，有人可以给我一个建议吗？

Answer 1

好的，最后我回到了我的问题并取得了一些进展：https://github.com/andyzee/jquery-resizable-rotation-patch 我现在决定不使用旋转矩阵（但实际上它可以工作），但是要切换处理程序

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];
}

我肯定会继续我的搜索，并且可能会编写自己的解决方案。

Answer 2

这是我在Andy Zee工作

上开发的一个补丁

JSFiddle

它基本上根据角度

改变dx，dy

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

它还会更改手柄的行为，并通过调整旋转元素的大小（posted here）进行位置校正

jquery ui resizable：调整旋转对象的大小

2 个答案: