jquery вращать, перетаскивать и изменять размер - PullRequest
Новая
       0

jquery вращать, перетаскивать и изменять размер

4 голосов
/ 11 января 2012

Я работаю над проектом, в котором я хочу перетаскивать, поворачивать и изменять размеры изображений. Это мой первый проект jquery, и пока все работает хорошо. Я нашел плагин 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 градусов

1 Ответ

1 голос
/ 10 апреля 2013

Как и в случае с 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…)

...