jquery - 为什么jCrop 0.9.12版本会在选择区域的左上角产生一个小黑框？

Question

我在 jcrop 中使用了以下脚本，在升级到版本 0.9.12 之前没有出现任何问题。现在，选择区域的左上角有一个小黑框。当我进行选择时，我无法捕获角落或侧面来调整选择的大小。我需要做什么才能使其与新版本兼容？

HTML:

<img id="cropbox" src="image/path" alt="image">
<form class="margin_top_10" action="my_file.php" method="post" onsubmit="return checkCoords();">
    <input type="hidden" id="x" name="x">
    <input type="hidden" id="y" name="y">
    <input type="hidden" id="w" name="w">
    <input type="hidden" id="h" name="h">
    <input type="hidden" id="pic_to_crop" name="pic_to_crop" value="some value">
    <input type="submit" name="submit" id="submit" value="Crop Image">
</form>

Jquery:

<script type="text/javascript">

$(function(){
    $('#cropbox').Jcrop({
        aspectRatio: 1.5,
        onSelect: updateCoords, 
        setSelect:   [ 100, 100, 50, 50 ]
    });
});
function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
function checkCoords()
{
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};
</script>

我可以单击所选区域内的任意位置，然后拖动图像周围的选区，但如您所见，我无法拉伸(stretch)选择区域(除非我单击并拖动黑框)。另外，当我单击并“向上”拖动小黑框时，选择区域会突然翻转(即，它绕 x 轴旋转 180 度)。但是，如果我单击并“向下”拖动黑框，则不会发生这种情况。

Answer 1

我也遇到了同样的问题，我花了一段时间才弄清楚发生了什么。在 0.9.12 版本中，jcrop 转而使用 .css 文件来定义用于调整大小的 handle 的位置，而不是在 .js 文件中设置它们。当我意识到这一点后，快速检查我的 jquery.Jcrop.css 文件表明它不是最新的。特别是，缺少一个包含如下设置的部分:

.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}

每个句柄 (n,e,s,w,ne,nw,se,sw) 都有一个这样的条目，如果没有这些，所有句柄的位置将默认为 0,0。如果您还没有，我建议您转到此处:

https://github.com/tapmodo/Jcrop/tree/master/css

并获取最新的 .css 文件来替换现有的文件。当然，在测试之前清除缓存(我忘记这样做，又浪费了十分钟，毫无结果)。

真心希望这能帮助其他人看到这个问题。