为什么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>

我可以点击所选内容中的任意位置并在图像周围拖动选区，但正如您所看到的，我无法拉伸选区（除非我点击并拖动黑匣子）。此外，当我点击并向上拖动小黑框时，选择区域突然翻转（即，它绕x轴旋转180度）。但是，如果我单击并向下拖动黑框，则不会发生这种情况。

Answer 1

我遇到了同样的问题，我花了一些时间来弄清楚发生了什么。在0.9.12版本中，jcrop切换到使用.css文件来定义用于调整大小的句柄的位置，而不是在.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文件以替换现有文件。当然，在测试之前清除缓存（我忘了自己做了另一个无效的十分钟）。

真的希望这可以帮助其他人看到这个问题。