调整旋转元素上的手柄大小

Question

我正在尝试在矩形的四个角上放置调整大小的手柄,可以拖动它来调整矩形的大小.我遇到的麻烦是在拖动其中一个矩形点后计算矩形的新宽度,新高度和新点.

如果矩形没有旋转,这显然是非常容易的,因为宽度和高度将改变与鼠标的offsetX和offsetY相同的大小.但是,此矩形可以旋转,因此offsetX和offsetY与宽度/高度的变化不匹配.

在上图中,我已经用纯黑色表示了我已经拥有的信息,以及我想要用浅灰色找到的信息.我试图展示如果我将a1角向上拖动到右边,矩形应该如何变化.

谁能帮我弄清楚如何计算缺失的信息？

谢谢你的帮助!非常感谢.

-

编辑:我有拖动开始,拖动移动,并拖动每个句柄上的结束回调.我当前的代码只是得到了新的点(在这个例子中,a2).不幸的是,这只是移动我们当前拖动到新位置的手柄,但显然对矩形的宽度/高度以及其他点的位置没有影响.我希望帮助找出的是如何根据这种阻力计算新的宽度和高度,以及其他点的新位置.

处理坐标(拖动前)

handles: { 
  a: { x: 11, y: 31 },
  b: { x: 44, y: 12 }, 
  c: { x: 39, y: 2 }, 
  d: { x: 6, y: 21 }
};

回调:

// Save the original x and original y coordinates
// of the handle, before dragging
onDragStart: function(x, y, handle) {
  handle.data({
   ox: x,
   oy: y
  });
}

// While dragging the handle, update it's coordinates to 
// reflect its new position
onDragMove: function(dx, dy, handle) {
  handle.attr({
   x: handle.data('ox') + dx,
   y: handle.data('oy') + dy
  });
}

// Not currently using the drag end callback
onDragEnd: function(x,y,handle) {}

Answer 1

http://en.wikipedia.org/wiki/Cartesian_coefficient_system#Distance_ Between_two_points 为您提供了查找 a1 到 a2 长度的方法

var len=Math.sqrt(Math.pow(a2x-a1x,2)+Math.pow(a2y-a1y,2));

然后观察灰线和黑线（我们称其为 H 点）与 a1 和 a2 相交形成的三角形。可以用三角函数来求解。因此，d1 到 c1 线与底部形成的角度我们称之为旋转角度（R）。这意味着 R 等于 a2 处的角度，a1 处的角度等于 90-R。找到侧面然后你就可以了

//line from a2 to H 
var hDif=Math.sin(R)*len;
//line from a1 to H
var wDif=Math.cos(R)*len;

然后您可以使用它们来找到新的长度和高度。还会进行一些计算，看看您是否要添加或减去旧的宽度和高度。