jQuery旋转，拖拽和调整大小

Question

我正在处理一个项目，想要拖动、旋转和调整图片大小。

这是我的第一个jquery项目，目前一切正常。

通过stackoverflow，我找到了处理旋转的插件jqueryrotate。

问题是，当我试图调整旋转后的图像大小时，结果有些怪异。旋转后的调整大小似乎不准确。

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.1.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    

<img id="resizableImage0" class="resize" width="100px" height="100px" alt="tile0" src="http://www.elaxtro.com/images/demo.png">
<img id="resizableImage1" class="resize" width="100px" height="100px" alt="tile1" src="http://www.specialized.com/OA_MEDIA/2009/bikes/9397-20_demo8_2_ano_blue_d.jpg">

jQuery

window.zindex = 30;

$(document).ready(function() {
    $(".resize").resizable();

    $(".resize").parent().draggable({
        stack: "div"
    });

    $(".resize").rotate({
        bind: {
            dblclick: function() {
                // get current
                var currentAngle = $(this).get(0).Wilq32.PhotoEffect._angle;
                var newAngle = currentAngle + 90;
                $(this).rotate(newAngle);
            }
        }
    });
});

这个代码片段可以帮助您更好的理解。 代码片段

双击可以将图像旋转90度 :)

有没有人能够帮助我解决这个问题。

提前感谢您的帮助。

编辑：修复了代码片段中的调整大小功能。请注意，问题在图像旋转90度后调整大小时最为明显。

当图像旋转0度或180度时，不会出现此问题。

- luuk86

---

刚刚发现我的调整大小器在我的 fiddle 示例中不起作用，但在我的自己的文件中却可以。我会尝试修复这个问题。 感谢 Rory 更新了我的帖子。 - luuk86

你找到了一些帮助吗？我也在寻找同样的东西，需要构建一个拼贴画生成工具。 - Enrique

Answer 1

就像您在 draggable() 中所做的那样，您必须在父级 div 上使用 rotate()。

$(".resize").resizable({handles: 'ne, se, sw, nw'});
$(".resize").parent().draggable({
    stack: "div"
});
$(".resize").rotate({
    bind: {
        dblclick: function() {
            $(this).data('angle', $(this).data('angle')+90);
            var w = $(this).css('width');
            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});

        }
    }
});

http://jsfiddle.net/U64se/163/（哇，163...）

- Shikiryu