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

Question

我正在编写一些代码来处理图像。我有 90% 的工作，但遇到了一个让我拔头发的错误!所以我有两个 slider 。左侧 slider 用于旋转，右侧 slider 用于缩放(缩放)。您也可以拖动图像来定位它。

是一定的序列，在缩放的时候会导致图片跳动。顺序是:

旋转、缩放、旋转、缩放、拖动、缩放。

在最终比例上，您将能够看到图像跳出位置。这是我得到的。

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

拖动:

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

我认为问题在于旋转或缩放结束函数。我有一种感觉，这可能与比例值有关，但我尝试了很多不同的组合，但没有成功。

Answer 1

经过数小时的测试和调试，我发现了如何做到这一点。事实证明这是一个非常简单的修复。问题是可拖动的 UI 事件向旋转事件返回了不同的顶部和左侧值。不完全确定如何或为什么，但它似乎适用于可拖动停止功能中的修改后的代码。你可以看到 fixed version here .

var il,it;
// Drag Handler
$('#posUsrImgWrap').draggable({
    drag:function(event, ui){
        il = ui.position.left;
        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=il;
        iyz=it;
    }
});