如何将弧度应用于多个调整大小的拖动处理程序

debugcn 发表于 Dev

用户11907970

考虑以下：

您有一个带有 8 个手柄的调整大小框，每个手柄都包含一个调整其父框大小的函数。一切都是花里胡哨，但在应用 CSS 变换来旋转 x 度后，一切都变得糟糕透了。

如何应用弧度等，以便每个处理程序在拖动处理程序时计算正确的值？

这是完整工作代码的演示，感谢作者。

---- 代码示例 ----

/**
 * Drag Resize Bottom Right Corner
**/ 
drag_br: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x,
    y: self._startPos.y,
    w: self._startPos.w + ( e.clientX - self._startPos.clientX ),
    h: self._startPos.h + ( e.clientY - self._startPos.clientY )
  });

  self._repaint();
},

/**
 * Drag Resize Top Right Corner
**/ 
drag_tr: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x ,
    y: self._startPos.y + ( e.clientY - self._startPos.clientY ),
    w: self._startPos.w + ( e.clientX - self._startPos.clientX ),
    h: self._startPos.h - ( e.clientY - self._startPos.clientY )
  });

  self._repaint();
},   

/**
 * Drag Resize Top Left Corner
**/ 
drag_tl: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x + ( e.clientX - self._startPos.clientX ),
    y: self._startPos.y + ( e.clientY - self._startPos.clientY ),
    w: self._startPos.w - ( e.clientX - self._startPos.clientX ),
    h: self._startPos.h - ( e.clientY - self._startPos.clientY )
  });

  self._repaint();
},  

/**
 * Drag Resize Bottom Left Corner
**/ 
drag_bl: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x + ( e.clientX - self._startPos.clientX ),
    y: self._startPos.y,
    w: self._startPos.w - ( e.clientX - self._startPos.clientX ),
    h: self._startPos.h + ( e.clientY - self._startPos.clientY )
  });

  self._repaint();
}, 

/**
 * Drag Resize Top Edge
**/ 
drag_t: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x,
    y: self._startPos.y + ( e.clientY - self._startPos.clientY ),
    w: self._startPos.w,
    h: self._startPos.h - ( 2 * ( e.clientY - self._startPos.clientY ) )
  });

  self._repaint();
}, 

/**
 * Drag Resize Left Edge
**/ 
drag_l: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x + ( e.clientX - self._startPos.clientX ),
    y: self._startPos.y,
    w: self._startPos.w - ( 2 * ( e.clientX - self._startPos.clientX ) ),
    h: self._startPos.h
  });

  self._repaint();
}, 

/**
 * Drag Resize Bottom Edge
**/ 
drag_b: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x,
    y: self._startPos.y - ( e.clientY - self._startPos.clientY ),
    w: self._startPos.w,
    h: self._startPos.h + ( 2 * ( e.clientY - self._startPos.clientY ) )
  });

  self._repaint();
}, 

/**
 * Drag Resize Right Edge
**/ 
drag_r: function( e ) {
  var self = this;

  self.layoutRect( {
    x: self._startPos.x - ( e.clientX - self._startPos.clientX ),
    y: self._startPos.y,
    w: self._startPos.w + ( 2 * ( e.clientX - self._startPos.clientX ) ),
    h: self._startPos.h
  });

  self._repaint();
},

我已经搜索了一个可能的解决方案，但每个结果都带有（使用插件/jQuery）或不完整的解决方案。

有什么问题？

当前，当单击拖动应用错误的计算时，演示有一个变换旋转（45度）。如果没有应用变换旋转，它会按预期工作。这可以通过从 CSS 面板中移除transform:rotate(45deg)来实现。

卡达斯

我的不好，与我在评论中所说的相反，三角学并不是那么基本，主要是因为它引起的坐标问题很少。原谅我的画，希望很清楚：

您想知道X要添加到矩形宽度的蚂蚁是什么
B 是你的角度 (45°)，在 JS 和弧度中给出 Math.PI / 4
你知道dX和dY哪些是你多么拖坐标
A是拖动的角度，Z是距离

现在，这些是需要了解的有用规则：勾股定理和基本三角学：

毕达哥尔说因为正方形三角形，你有Z² = dX² + dY²，所以在 JS 中：

var Z = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));

三角学说，cos(A) = dX / Z在 JS 中给出（cosa是的倒数cos）：

var A = Math.acos(dX / Z);

出于同样的原因，您拥有cos(A + B) = X / Z，这意味着：

var X = Z * cos(A + B);

最后要知道的是，要获得高度而不是宽度，您将使用sin而不是cos..

其他问题：

Y轴的坐标系是颠倒的：在三角学中，当你向上时，它是正的，在屏幕上，这（通常）相反 - >需要否定dY以获得直角
当垂直距离已经用直角计算出来了，往上的时候需要把结果取反（因为你实际上是给矩形减去了高度）
在图片中，鼠标可能在水平线下方，在这种情况下，您需要减去角度而不是添加它们（我建议您绘制它）并使用A - B而不是A + B!!!
我不会详细介绍这个，第一个想法是Math.abs(A-B)用来获得水平线以下的角度，但实际上你需要使用，A-B以便当鼠标角度在“内部”B（之间）时，角度为负水平线和你的角度）

现在对于右下角的最终代码，希望您能管理其余部分（X在示例中是dWhere）：

    drag_br: function( e ) {
      var self = this;

      var dX = e.clientX - self._startPos.clientX,
          dY = self._startPos.clientY - e.clientY, // same as -(e.clientY - self._startPos.clientY)
          Z = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2)),
          B = Math.PI / 4,
          A, dW, dH;

      if(Z === 0){ //no division by zero please
        dW = 0;
        dH = 0;
      }else{
        A = Math.acos(dX / Z);
        if(dY >= 0){ //dragged up from horizontal line
          dW = Z * Math.cos(A + B);
          dH = -Z * Math.sin(A + B);
        }else{ //dragged down from horizontal line
          dW = Z * Math.cos(A - B);
          dH = Z * Math.sin(A - B);
        }
      }

      self.layoutRect( {
        x: self._startPos.x,
        y: self._startPos.y,
        w: self._startPos.w + dW,
        h: self._startPos.h + dH
      });

      self._repaint();
    },

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。