1
Я использую плагин jquery resizable для изменения размеров элементов с помощью изменяемых размеров ручек, но он не работает после вращающегося элемента.jquery resizable не работает должным образом при углах 90 и 270
изменяемые размеры ручек и последующие операции изменения размера не работают должным образом после вращения точно на 90 и 270 градусов, потому что изменяемый размер не знает угла поворота.
В следующем коде я только что нашел угол поворота и изменил направление рукоятки в соответствии с углом поворота, но он не работает должным образом на 90 и 270 из-за проблемы с высотой и шириной, которую я пытался исправить, но я не мог, помог мне
$('#screenlayer_'+count+ ' .polaroid').resizable({
handles:'se, sw, ne, nw',
zIndex : 10000,
delay: 0,
create:function() {
},
start:function(event, ui){
}, //start:function(event, ui)
resize:function(event, ui){
var matrix = $(this).css("-webkit-transform") ||
$(this).css("-moz-transform") ||
$(this).css("-ms-transform") ||
$(this).css("-o-transform") ||
$(this).css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
}
else {
var angle = 0;
}
if(angle < 0)
angle +=360;
console.log(angle)
if((angle >= 0 && angle < 45) || (angle < 361 && angle >= 315))
{
$(this).parent().find('.ui-resizable-sw').css({
'bottom':'-10px','left':'-10px','top':'','right':''
});
$(this).parent().find('.ui-resizable-nw').css({
'top':'-10px','left':'-10px','bottom':'','right':''
});
$(this).parent().find('.ui-resizable-se').css({
'bottom':'-10px','right':'-10px','top':'','left':''
});
$(this).parent().find('.ui-resizable-ne').css({
'top':'-10px','right':'-10px','bottom':'','left':''
});
}
else if(angle >= 45 && angle < 135)
{
$(this).parent().find('.ui-resizable-nw').css({
'bottom':'-10px','left':'-10px','top':'','right':''
});
$(this).parent().find('.ui-resizable-sw').css({
'bottom':'-10px','right':'-10px','top':'','left':''
});
$(this).parent().find('.ui-resizable-ne').css({
'top':'-10px','left':'-10px','bottom':'','right':''
});
$(this).parent().find('.ui-resizable-se').css({
'top':'-10px','right':'-10px','left':'','bottom':''
});
}
else if(angle >=135 && angle < 225)
{
$(this).parent().find('.ui-resizable-ne').css({
'bottom': '-10px','left':'-10px','top':'','right':''
});
$(this).parent().find('.ui-resizable-nw').css({
'bottom': '-10px','right':'-10px','top':'','left':''
});
$(this).parent().find('.ui-resizable-se').css({
'top': '-10px','left':'-10px','bottom':'','right':''
});
$(this).parent().find('.ui-resizable-sw').css({
'top': '-10px','right':'-10px','left':'','bottom':''
});
}
else if(angle >=225 && angle < 315)
{
$(this).parent().find('.ui-resizable-se').css({
'bottom':'-10px','left':'-10px','top':'','right':''
});
$(this).parent().find('.ui-resizable-ne').css({
'bottom':'-10px','right':'-10px','top':'','left':''
});
$(this).parent().find('.ui-resizable-sw').css({
'top': '-10px','left': '-10px','bottom':'','right':''
});
$(this).parent().find('.ui-resizable-nw').css({
'top':'-10px','right':'-10px','left':'','bottom':''
});
}
},
stop:function(event , ui)
{
}
});
оценивая любую помощь, спасибо.