javascript - 调整旋转元素上的 handle 大小

Question

我正在尝试将调整大小的 handle 放在矩形的四个 Angular 上，可以拖动它来调整矩形的大小。我遇到的问题是在拖动矩形的一个点后计算矩形的新宽度、新高度和新点。

如果矩形不旋转，这显然很容易，因为宽度和高度的变化量与鼠标的 offsetX 和 offsetY 相同。然而，这个矩形可以旋转，所以 offsetX 和 offsetY 不匹配宽度/高度的变化。

在上图中，我用纯黑色表示我已有的信息，用浅灰色表示我想查找的信息。我试图展示如果我将 a1 Angular 向上和向右拖动，矩形应该如何变化。

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

感谢您的帮助!非常感谢。

--

编辑:我在每个 handle 上都有拖动开始、拖动移动和拖动结束回调。我当前的代码只是获取新点(在本例中为 a2)。不幸的是，这只是将我们当前正在拖动的 handle 移动到它的新位置，但显然对矩形的宽度/高度及其其他点的位置没有影响。我希望得到帮助的是如何根据这个拖动计算新的宽度和高度，以及其他点的新位置。

handle 坐标(拖动前)

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_coordinate_system#Distance_between_two_points给你找到 a1 到 a2 的长度的方法

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

然后查看由灰线和黑线(我们称其为 H 点)与 a1 和 a2 的交点形成的三 Angular 形。可以用三 Angular 函数来求解。所以由线 d1 到 c1 与底部形成的 Angular 可以称为旋转 Angular (R)。这意味着 R 等于 a2 处的 Angular ，而 a1 处的 Angular 等于 90-R。找到侧面然后你去

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

然后您可以使用这些来找到新的长度和高度。将进行更多计算以查看您是在旧的宽度和高度上增加还是减少。