Question

我创建了一个滑块来操作DOM中的图像。我想要发生的是图像缩放，但在缩放时保持居中。我遇到的问题是我让用户能够使用.draggable来定位图像，但是在他们移动图像后他们再次尝试缩放它会跳转到位。我在问题中添加了一个小提示，以表明我的意思。

基本上如果在拖动图像之前使用滑块更改图像的大小，图像将缩放并正确定位，但是如果在第一次缩放后移动图像，然后在拖动图像后再次尝试缩放图像在滑块的第一次迭代中，然后正确地缩放和定位。

奇怪的是，如果你缩放图像拖动它再将其缩小回原始大小再拖动，然后尝试正确缩放它的位置。看起来它与之前的滑块值有关。

滑块和拖动代码：

$( "#slide1" ).slider({
            range: "min",
            min: -70,
            max: 150,
            step: 10,
            value: 0,


   slide: function( event, ui ) {
        var zv = (1+ ui.value/100); // Rotate Value
        var nx = 0;
        var ny = 0;
        nzo = calculateAspectRatioFit(iwz, ihz, iwz*(zv), ihz*(zv));
        $('#img1').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));
            $('#img1').css({'left':nx+'px','top':ny+'px'});
        } else {
            nx = (ixz-(wd/2));
            ny = (iyz-(hd/2));
            $('#img1').css({'left':nx+'px','top':ny+'px'});
        }
    }
});



$('#img1').draggable({
            drag:function(event, ui){
                var il = ui.position.left;
                var it = ui.position.top;
                var iw = $(this).width();
                var ih = $(this).height();
                $('#img1').css({'top':it+'px','left':il+'px'});
            },
            stop:function(){
                ixz = $('#img1').position().left;
                iyz = $('#img1').position().top;
            }
        });

});

所有代码都在JSFiddle found here。

之内

Answer 1

在计算nx和ny时不添加或删除wd / hd。这将解决您的问题

            if (zv < 1){
                nx = (ixz);
                ny = (iyz);
                $('#img1').css({'left':nx+'px','top':ny+'px'});
            } else {
                nx = (ixz);
                ny = (iyz);
                $('#img1').css({'left':nx+'px','top':ny+'px'});
            }

Answer 2

终于找到了如何做到这一点。我要做的是检查它是否被拖动，如果它是在缩放的第一次迭代时被拖动我需要在操纵图像之前从x和y位置取走初始缩放值宽度和高度差。很难解释，但这里是working fiddle

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

使用jQuery Slider缩放图像无法正确定位

2 个答案: