Question

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

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

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

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

我在下面添加了一些代码，我的完整代码可以在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;
    }
});

Answer 2

我通过评论您的一些代码对代码进行了一些更改。它似乎工作，错误消失了。请给它一个look。如果您对代码发表评论，那么我可以更好地解决您的问题。我评论了以下部分：

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＆amp; zc = 0 您将 ixz，iyz 值设置两次。

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

2 个答案: