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

小提琴应该让事情变得清晰。 Fiddle

双击将图像旋转90度：）

有没有人可以帮我解决这个问题。

提前谢谢。

编辑：修改小提琴示例中的缩放器请注意，如果旋转一次以使图像旋转90度，则问题最明显。在此之后尝试调整大小。

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

Answer 1

与draggable()一样，您必须在父rotate()上使用div。

$(".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 ......）

jquery旋转，拖动和调整大小

1 个答案: