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

我正在处理一些代码来操作图像。我有 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;
        }
    });

我认为问题出在旋转或缩放结束功能上。我有一种感觉，这可能与比例值有关，但我尝试了许多不同的组合来使其工作，但没有运气。