使用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();
});
});
答案 0 :(得分:2)
原来是一个非常小的调整,你几乎就在那里!如果您想拥有新的选择框,则必须在show
之前重新设置 .update()
选项,直观地更改:
//setOptions with show, sets the gridarea for the next update
selectlarge.setOptions({ show: true });
selectlarge.update();
然后在单击下成功重绘该框,就像在下面的小提琴中一样,它会监听defaultCoords
对象中设置的维度: