imgAreaSelect onSelectEnd事件中的.update（）

Question

使用imgAreaSelect，如果用户选择的区域太小（只需点击一下），我就会尝试设置默认选择。然而，我无法在.update()内拨打onSelectEnd。我觉得我错过了一些东西，但我无法理解。

这是我的代码：

$(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

原来是一个非常小的调整，你几乎就在那里！如果您想拥有新的选择框，则必须在show之前重新设置 .update()选项，直观地更改：

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

然后在单击下成功重绘该框，就像在下面的小提琴中一样，它会监听defaultCoords对象中设置的维度：

演示小提琴：http://jsfiddle.net/Pg39A/