1

我正在使用 jquery resizable plugin 使用可调整大小的句柄来调整元素的大小，但在旋转元素后它不起作用。

可调整大小的句柄及其随后的调整大小操作在精确旋转 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) 
    {


    }
});

感谢任何帮助，谢谢。

4

0 回答 0