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

【问题标题】：Resizing Handles on a Rotated Element调整旋转元素上的手柄大小
【发布时间】：2013-12-20 10:32:37
【问题描述】：

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

如果矩形没有被旋转，这显然会很容易，因为宽度和高度的变化量与鼠标的 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) {}

【问题讨论】：

您能向我们展示一下您目前拥有的代码 sn-p 吗？
@Shurane 我一直在尝试解决这个问题，并为此编写了很多代码，但没有任何帮助，所以它被丢弃了。但我会把我有的那一点点扔进去。
如果你能在jsfiddle.net上提供一个可证明的例子，我将不胜感激
不幸的是，没有什么可展示的。几天来，我一直在谷歌搜索诸如“翻译矩形一个坐标”和“javascript 调整可旋转手柄大小”和“矩形几何”之类的东西，但实际上一无所获。我所能做的就是将拖动的手柄移动到它的新位置，但在计算新点和边时我什至不确定从哪里开始。但我会尝试在问题中添加尽可能多的有用信息。

标签： javascript rotation resize draggable drag

【解决方案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 生病尝试编码并在早上第一件事分享一个工作小提琴。
你能解释一下为什么a2处的角度等于旋转R吗？
@MartijnvandenBergh 简短的回答是我认为我错了，它不是 R。但是，您确实需要知道 R 的值才能计算正确的角度。我还没有时间真正解决它，但我认为一种解决角度的方法就像没有旋转一样，然后通过 R 调整该角度，然后一切都应该起作用。如果我能找到时间来测试它，我会尝试更正它，但如果你发现它，请随时检查并提交编辑。
是的，同时我也找到了答案，你确实需要知道角度 R。你可以用 a2 到 c1/c2 到角度 R 的水平线制作一个直角三角形。现在你可以用三角法计算这个三角形的角度。现在用新创建的三角形中的相应角度减去角度 R。现在你知道了你需要知道的一切，因为你知道三角形 c1/c2 到 d2 到 a2，角度和边。如果我有时间，我会对此做出完整的回答。（如果我犯了错误，请纠正我）

【解决方案2】：

我有另一个想法：

假设您的矩形相对于原点逆时针旋转了 30 度。

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

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

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

【讨论】：