调整旋转元素上的手柄大小 [英] Resizing Handles on a Rotated Element

问题描述

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

I'm trying to put resizing handles on the four corners of a rectangle, which can be dragged to resize the rectangle. What I'm having trouble with is calculating the new width, new height, and new points of the rectangle after I've dragged one of the rectangle's points.

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

If the rectangle were not rotated, this would obviously be very easy because the width and height would change by the same amout as the mouse's offsetX and offsetY. However, this rectangle CAN be rotated, so offsetX and offsetY don't match up to the changes in width/height.

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

In the image above, I've represented information that I already have in solid black, and information I want to find in light grey. I've tried to show how the rectangle should change if I dragged the a1 corner up and to the right.

任何人都可以帮我弄清楚如何计算丢失的信息？

Could anyone help me figure out how to calculate the missing information?

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

Thanks for any help! It's much appreciated.

-

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

I've got drag start, drag move, and drag end callbacks on each handle. My current code simply gets the new point (in this example, a2). Unfortunately this simply moves the handle we're currently dragging into its new position, but obviously has no effect on the width/height of the rectangle, and the position of its other points. What I'm hoping for help figuring out is how do I calculate the new width and height, and the new position of the other points, based on this drag.

处理坐标（拖动前）

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

推荐答案

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

http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Distance_between_two_points gives you the method for finding the length of a1 to 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。要查找边，那么你去

Then looking at the triangle formed by the intersection of the grey and black lines (Lets call that point H) and a1 and a2. You can use trigonometry to solve. So the angle formed by the line d1 to c1 with the bottom lets call that the angle of rotation(R). That means the R is equal to angle at a2 and the angle at a1 is equal to 90-R. To find the sides then you go

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

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

You can then use these to find the new length and height. There will a few more calculations to see if you are adding or subtracting to the old width and height.

这篇关于调整旋转元素上的手柄大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！