javascript - onSelectEnd 事件中的 imgAreaSelect .update()

Question

使用 imgAreaSelect ，如果用户选择的区域太小(只需单击一下)，我将尝试设置默认选择。但是，我无法在 onSelectEnd 中调用 .update()。我觉得我遗漏了一些东西，但我无法弄清楚。

这是我的代码:

$(function() {
    $('#crop-large').on('open.leanModal', function() {
        setTimeout(function() {
            selectlarge = $('.img-orig-large').imgAreaSelect({
                instance: true,
                handles: true,
                zIndex: 12000,
                imageWidth: <?php echo $imgsize[0]; ?>,
                imageHeight: <?php echo $imgsize[1]; ?>,
                onSelectEnd: function (img, selection) {
                    if(selection.width > 20 && selection.height > 20) {
                        $('input[name="large-x1"]').val(selection.x1);
                        $('input[name="large-y1"]').val(selection.y1);
                        $('input[name="large-x2"]').val(selection.x2);
                        $('input[name="large-y2"]').val(selection.y2);
                    } else {
                        truewidth  = <?php echo $imgsize[0]; ?>;
                        trueheight = <?php echo $imgsize[1]; ?>;
                        var dummy_x1 = truewidth*0.25;
                        var dummy_y1 = trueheight*0.25;
                        var dummy_x2 = truewidth*0.75;
                        var dummy_y2 = trueheight*0.75;
                        $('input[name="large-x1"]').val(dummy_x1);
                        $('input[name="large-y1"]').val(dummy_y1);
                        $('input[name="large-x2"]').val(dummy_x2);
                        $('input[name="large-y2"]').val(dummy_y2);
                        selectlarge.setSelection(dummy_x1, dummy_y1, dummy_x2, dummy_y2, true);
                        selectlarge.update();
                    }
                }
            });
        }, 300);
    });
    $('#crop-large').on('close.leanModal', function() {
    }, function() {
        selectlarge.cancelSelection();
    });
});

Answer 1

事实证明这是一个非常小的调整，你就快成功了!如果您想要新的选择框，您必须在 .update() 之前重新设置 show 选项，视觉上更改:

//setOptions with show, sets the gridarea for the next update
selectlarge.setOptions({ show: true });
selectlarge.update();

然后单击一次即可成功重绘框，就像在下面的 Fiddle 中所做的那样，它监听在 defaultCoords 对象中设置的尺寸:

演示 fiddle :http://jsfiddle.net/Pg39A/