Question

我使用的是自上而下的坐标系。

我有一个矩形R，左上角是点（a），中间是点（b），中间是点（c）：

a-b-|
| c |  R
|---|

我从点（b）伸展，将R的高度增加dh。我只计算R的新高度：newh = oldh + dh 我简单地计算了点（0）的新坐标：newy = oldy - dh; newx = oldx

我现在有了相同的矩形R，它首先从北方绕中心（c）顺时针旋转了θ度。我从点（b）伸展开来，将R的实际高度增加dh。我只计算R的新高度：newh = oldh + dh 如何计算点（a）的新坐标？请记住，旋转是围绕中心点。

Answer 1

好吧所以我似乎有工作代码，但我确信我可以做很多改进，但仍然要提高效率等等。我现在也必须处理其他7个调整大小的句柄（这是只是中上层）：

var RADIANS = Math.PI/180;

var rotated_coords = {x: coords.x, y: coords.y};
if (shape.rotate) {
  var rads = -shape.rotate*RADIANS;
  var middle = {x: shape.x + shape.w/2, y: shape.y + shape.h/2}; //
middle of rotation
  var offset = {
    x: middle.x - coords.x,
    y: middle.y - coords.y
  };
  rotated_coords.x = middle.x - (offset.x * Math.cos(rads) - offset.y
* Math.sin(rads));
  rotated_coords.y = middle.y - (offset.x * Math.sin(rads) + offset.y
* Math.cos(rads));
}

// 1. get centre before resize
var middle = {
  x: shape.x + shape.w/2,
  y: shape.y + shape.h/2
};
// 2. get bottom-middle of rotated shape
var bottom_middle = {
  x: middle.x - shape.h/2 * sin_th,
  y: middle.y + shape.h/2 * cos_th
};
// 3. resize (get difference in height, dh) from bottom-middle point
var dh = shape.y - rotated_coords.y;
// 4. get new centre point
var new_middle = {
  x: bottom_middle.x + (shape.h + dh) / 2 * sin_th,
  y: bottom_middle.y - (shape.h + dh) / 2 * cos_th
};
// 5. return to non-rotated top-left point
shape.x = new_middle.x - shape.w / 2;
shape.y = new_middle.y - (shape.h + dh) / 2;
// 6. set our new height
shape.h += dh;

拉伸后旋转矩形上的点坐标

1 个答案: