Question

这里是 jsfiddle 。

它是裁剪图像的界面。如您所见，选择div采用相同的背景图像，并将其定位到选择div的顶部和左侧属性的负数。理论上这应该给出一个完美的重叠，但是当你移动选择div时会出现抖动，而我似乎无法弄清楚是什么导致了它。

HTML

<div id="main">
    <div id="selection"></div>
</div>

CSS

#main {
    width: 600px;
    height: 450px;
    position: relative;
    background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
    background-size: contain;
}
#selection {
    width: 100px;
    height: 100px;
    position: absolute;
    background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
    border: 1px dotted white;
    background-size: 600px 450px;
}

jquery的

$(document).ready(function () {
    var move = false;
    var offset = [];
    var selection = null;

    $("#selection").mousedown(function (e) {
        move = true;
        selection = $(this);

        offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
    });

    $("#selection").mousemove(function (e) {
        if (move == true) {
            selection.css("left", e.pageX - offset[0]);
            selection.css("top", e.pageY - offset[1]);

            selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top  ) - 1) + "px"));
        }
    });

    $("#selection").mouseup(function (e) {
        move = false;
    });

})

Answer 1

似乎需要添加5偏移值以确保无缝性

DEMO http://jsfiddle.net/nzx0fcp5/2/

offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];

Answer 2

因此，在进行实验时我发现这只是图像某些尺寸的问题。原始大小没有问题，无论是这个尺寸的一半还是四分之一。这不仅仅是保持图像按比例不具有图像正方形或使用偶数像素尺寸的问题。我假设这与部分像素大小有关，但我不确定，我看不出任何解决方法，至少没有一个看起来值得付出努力。

因此，在查看其他裁剪器的代码时，我看了一下POF的图像裁剪器，他们似乎已经解决了问题，因为根本没有使用background-position属性（我不确定它是插件还是他们自己编码）。他们只是将图像向下设置，然后使用透明的选择div，每个边缘都粘有4个div用于着色。因此，在运行中根本没有像素运算。我喜欢这个设计的简洁性和轻量级特性，并在jsfiddle中自己敲了一个版本，看看我是否能让它运行良好。

new jitter free jsfiddle with no pixel crunching

我也喜欢预览框的解决方案。

HTML

<body>
 <div id="main">
    <img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
     <div id="upperShade" class="shade" > </div>
     <div id="leftShade" class="shade" > </div>
    <div id="selection"></div>
     <div id="rightShade" class="shade"></div>
     <div id="lowerShade" class="shade" ></div>
 </div>
</body>

CSS

#main {
   position:relative;
    width: 450px;
    height: 600px;
}
#selection {
    width: 148px;
    height: 148px;
    position: absolute;
    border: 1px dotted white;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.shade {
    background-color: black;
    opacity: 0.5;
    position: absolute;

}

#upperShade {
    top: 0px;
    left: 0px;
    width: 600px;
}

#leftShade {
    left: 0px;
    top: 0px;
    height: 150px;
    width: auto;
}

#rightShade {
    left: 150px;
    top: 0px;
    height: 150px;
    width: 450px;
}

#lowerShade {
    left:0px;
    top: 150px;
    width: 600px;
    height:  300px;
}

jquery的

$(document).ready(function () {
    var move = false;
    var offset = [];
    var selection = null;

    $("#selection").mousedown(function (e) {
        move = true;
        selection = $(this);

        offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
    });

    $("#selection").mousemove(function (e) {
        if (move == true) {
            selection.css("left", e.pageX - offset[0]);
            selection.css("top", e.pageY - offset[1]);
            setShade();
        }
    });

    function setShade() {
        $("#upperShade").css("height", selection.position().top);
        $("#lowerShade").css("height", 600 - (selection.position().top + 150));
        $("#lowerShade").css("top", selection.position().top + 150);
        $("#leftShade").css("top", selection.position().top);
        $("#leftShade").css("width", selection.position().left);
        $("#rightShade").css("top", selection.position().top);
        $("#rightShade").css("left", selection.position().left + 150);
        $("#rightShade").css("width", 450 - selection.position().left);
    }

    $("#selection").mouseup(function (e) {
        move = false;
    });

});

使用jquery改变背景位置时的抖动

2 个答案: