Question

我正在使用jquery resizable插件来使用可调整大小的句柄调整元素大小，但在旋转元素后它无法正常工作。

可调整大小的手柄及其后续的调整大小操作在完全旋转90度和270度后无法正常工作，因为可调整大小并不知道旋转角度。

在下面的代码中我只是找到旋转角度并根据旋转角度改变了手柄的方向，但由于高度和宽度问题我在90和270下无法正常工作我试图修复但是我不能帮助我< / p>

    $('#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) 
    {


    }
});

感谢任何帮助，谢谢。

Answer 1

请参阅此链接以获取具有轮换支持的{jquery-ui-resizable https://gist.github.com/suganthibalaji/2e876579e613b66eff9b

jquery resizable在90和270角度不能正常工作

1 个答案: