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

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) {}

- Nick Budden

---

你能展示一下你目前的代码片段吗？ - Ehtesh Choudhury

@Shurane 我已经试图弄清楚这个问题很长时间了，并且在此过程中编写了很多代码，但是它们都没有帮助到我，所以都被抛弃了。但是我会把我所拥有的一点点东西放进去。 - Nick Budden

如果您能在http://jsfiddle.net上提供一个可演示的例子，我将非常感激。 - Ehtesh Choudhury

很不幸，我真的没有什么可以展示的东西。我已经搜索了一些关键词，比如“矩形坐标转换”、“JavaScript调整旋转手柄”、“矩形几何学”，但是几天下来，我一无所获。我只能将拖动的手柄移动到它的新位置，但是当涉及到计算新点和边时，我甚至不知道从哪里开始。但是我会尽可能在问题中添加有用的信息。 - Nick Budden

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;

您可以使用这些尺寸计算新的长度和高度。还需要进行一些计算，以确定是否要对旧的宽度和高度进行加减运算。

- qw3n

---

谢谢@qw3n，我会尝试编写代码并在明天第一时间分享一个可工作的示例。 - Nick Budden

请问为什么a2处的角度等于旋转R？ - Martijn van den Bergh

@MartijnvandenBergh 简短的回答是我认为我错了，它不是 R。然而，您需要知道 R 的值才能计算出正确的角度。我还没有时间真正解决它，但我认为一种解决方法是将角度解决为如果没有旋转，然后通过 R 调整该角度，然后所有东西都应该正常工作。如果我有时间测试它，我会尝试纠正它，但如果您找到解决方法，请随时检查并提交编辑。 - qw3n

在此期间，我也找到了一个答案，你确实需要知道角度R。你可以用a2到c1/c2与角度R的水平线构成一个直角三角形。现在你可以用三角函数计算这个三角形的角度。现在将角度R减去新创建的三角形中相应的角度。现在你知道了所有你需要知道的东西，因为你知道了三角形c1/c2到d2到a2、角度和边长。如果我有时间，我会把这个完整的答案写出来。（如果我犯了错误，请纠正我） - Martijn van den Bergh

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

- Ali Seyfollahi