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

Question

我正在编写代码以操作图像。我已经完成了90％，但遇到了一个让我抓狂的错误！所以我有两个滑块。左侧滑块用于旋转，右侧滑块用于缩放。您还可以拖动图像来定位它。

有一定的顺序会导致图像在缩放时跳动。该顺序为：

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

在最后一次缩放中，您将能够看到图像跳出位置。这就是我遇到的问题。

我在下面添加了我的一些代码，完整代码可以在此链接中测试。 拖动：

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

我认为问题出现在旋转或缩放结束函数中。我有一种感觉，这可能与比例值有关，但是我尝试了许多不同的组合以使其起作用，但没有成功。

- Glen Robson

Answer 1

经过数小时的测试和调试，我终于找到了解决方法。原来问题很简单，可通过修正拖动UI事件返回的顶部和左侧值与旋转事件不同的问题得以解决。虽然不太确定具体原因，但在可拖动停止函数中修改代码后似乎可以正常工作。你可以在这里查看修复版本。

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

- Glen Robson

Answer 2

我已经通过注释你的代码做了一些更改。它似乎可以工作并且错误已经消失了。请 查看 一下。如果你注释掉你的代码，那么我可能能够更好地解决你的问题。我已经注释了以下部分：

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

可能问题主要是由于当 dragged=true & zc=0 时，您将 ixz，iyz 值设置了两次。

- Gaurav Kalyan

---

抱歉，也许我没有表达清楚，但是当图像被缩放时，我需要它从中心重新定位。您的解决方案从左上角进行缩放。 - Glen Robson

感谢您抽出时间查看，但我已经找到了解决方案。我在我的答案中提供了解决方案。很抱歉我没有对我的代码进行注释，因为我在这个项目上有点时间紧迫。 - Glen Robson