缩放，拖动和旋转时的图像定位

我正在编写一些代码来处理图像。我有90％的工作正常，但是遇到了一个虫子，我不得不拔掉头发！所以我有两个滑块。左滑块将旋转，右滑块将缩放（缩放）。您也可以拖动图像以定位它。

是一个特定的序列，将导致在缩放图像时跳转。顺序是：

旋转，缩放，旋转，缩放，拖动，缩放。

在最终比例下，您将能够看到图像跳出位置。这是，但我越来越。

我在下面添加了一些代码，完整的代码可以在jsfiddle中进行测试

拖：

// Drag Handler
$('#posUsrImgWrap').draggable({
    drag:function(event, ui){
        var il = ui.position.left;
        var it = ui.position.top;
        var iw = $(this).width();
        var ih = $(this).height();
        $('#posUserImg').css({'top':it+'px','left':il+'px'});
        dragged = true;
        zc = 0;
    },
    stop:function(){
        ixz = $('#posUserImg').position().left;
        iyz = $('#posUserImg').position().top;
        if(rotated){
            if(!zoomed){
                rx=orx*zv;
                ry=ory*zv;
            }
            ixz=ixz+rx;
            iyz=iyz+ry;
        }
        rxz=ixz;
        ryz=iyz;
        zoomed=false;
        rd=true;
    }
});

旋转：

$( "#slider-vertical" ).show().slider({
    orientation: "vertical",
    min: -180,
    max: 180,
    value: sv,
    slide: function( event, ui ) {
        var rv = ui.value; // Rotate Value

        $('#posUserImg, #posUsrImgWrap').rotate(rv);
        $('#rVal').val(rv);
    },
    stop:function(){
        rx=((rxz - $('#posUserImg').position().left));
        ry=((ryz - $('#posUserImg').position().top));
        orx=rx;
        ory=ry;
        rzv=zv;
        rotated=true;
    }
});

规模：

$( "#slider-vertical-zoom" ).show().slider({
        orientation: "vertical",
        min: -90,
        max: 150,
        step: 5,
        value: szv,
        start:function(){
            czv = (1+ $(this).slider("value")/100);
        },
        slide: function( event, ui ) {
            zv = (1+ ui.value/100); // Zoom Value
            var nx = 0;
            var ny = 0;

            var ozv =  (1+ parseInt($('#zVal').val())/100);

            nzo = calculateAspectRatioFit(iwz, ihz, iwz*(ozv), ihz*(ozv));

            if (dragged && zc == 0){
                var wt = Math.abs(iwz - nzo.width);
                var ht = Math.abs(ihz - nzo.height);
                if (czv < 1){
                    ixz = ixz-(wt/2);
                    iyz = iyz-(ht/2);
                } else {
                    ixz = ixz+(wt/2);
                    iyz = iyz+(ht/2);
                }
            }

            nzo = calculateAspectRatioFit(iwz, ihz, iwz*(zv), ihz*(zv));

            $('#posUserImg, #posUsrImgWrap').width(nzo.width).height(nzo.height);
            var wd = Math.abs(iwz - nzo.width);
            var hd = Math.abs(ihz - nzo.height);

            if (zv < 1){
                nx = (ixz+(wd/2));
                ny = (iyz+(hd/2));
                $('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
            } else {
                nx = (ixz-(wd/2));
                ny = (iyz-(hd/2));
                $('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'});
            }

            $('#wPos').val(nzo.width);
            $('#hPos').val(nzo.height);
            $('#xPos').val(($('#posUserImg').position().left+(orx*zv)));
            $('#yPos').val(($('#posUserImg').position().top+(ory*zv)));
            $('#zVal').val(ui.value);
            zc++;
            iz=1;
        },
        stop: function(){
            zx = 0;
            zoomed=true;
            rx=orx*zv;
            ry=ory*zv;
            rxz=ixz+rx;
            ryz=iyz+ry;
        }
    });

我认为问题出在旋转或刻度末端功能。我觉得这可能与缩放比例有关，但是我尝试了很多不同的组合来使它正常运行。