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

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_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。您可以使用三角学来解决。因此，线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;

然后您可以使用它们来查找新的长度和高度。还有一些计算可以看出你是在增加还是减去旧的宽度和高度。

Answer 2

我有另一个想法：

考虑到你的矩形相对于原点逆时针旋转30度。

当用户点击其中一个边或角时，请执行以下操作：

1）让StartPt =鼠标开始的点 2）获取鼠标移动到的点。让它成为EndPt 3）将矩形的每个顶点旋转-30，使其成为未旋转的矩形。 （不要绘制未旋转的矩形，仅用于计算目的）
4）将StartPt和EndPt旋转-30度。计算点时矩形的宽度和高度的变化 5）将更改添加到矩形的旋转顶点 6）将矩形的顶点旋转+30度。现在绘制矩形。

https://www.experts-exchange.com/questions/24244758/How-can-let-a-user-drag-to-resize-a-rotated-rectangle.html#answer23964155