如何找到旋转向量的 x,y 坐标

Question

我找到了从不同的堆栈溢出帖子计算向量后旋转的边界框的宽度和高度的最佳方法。这效果很好。我现在的问题是计算旋转矢量边界框的新 x,y 坐标。这是我的 javascript。 newWidth、newHeight 变量是正确的，但是 rotatedXPos、rotatedYPos 不正确，这是因为 x0、y0 ——我认为应该是向量的旋转中间——也是不正确的（它们被设置为向量右上角/左上方的 x,y 坐标，我知道这是错误的）。

this.options.rotationAngle = parseInt(this.options.lastRotationAngle);
var degreesAsRadians = this.options.rotationAngle*Math.PI/180;
var points = new Array();
points.push({x:0, y:0});
points.push({x:this.options.width, y:0});
points.push({x:0, y:this.options.height});
points.push({x:this.options.width, y:this.options.height});
var bb = new Array();
bb['left'] = 0; bb['right'] = 0; bb['top'] = 0; bb['bottom'] = 0;

$A(points).each(function(p) {
  var newX = Math.abs(parseInt(p.x * Math.cos(degreesAsRadians) + p.y *  Math.sin(degreesAsRadians)));
  var newY = Math.abs(parseInt(p.x * Math.sin(degreesAsRadians) + p.y * Math.cos(degreesAsRadians)));
  bb['left'] = Math.min(bb['left'], newX);
  bb['right'] = Math.max(bb['right'], newX);
  bb['top'] = Math.min(bb['top'], newY);
  bb['bottom'] = Math.max(bb['bottom'], newY); 
});

var newWidth = parseInt(Math.abs(bb['right'] - bb['left']));
var newHeight = parseInt(Math.abs(bb['bottom'] - bb['top']));

Object.extend(this.options, {
rotatedWidth: newWidth
,rotatedHeight: newHeight 
});

var x0 = this.options.xPos;
var y0 = this.options.yPos;

this.options.rotatedXPos = x0+(this.options.xPos-x0)*Math.cos(degreesAsRadians)+(this.options.yPos-y0)*Math.sin(degreesAsRadians);
this.options.rotatedYPos = y0-(this.options.xPos-x0)*Math.sin(degreesAsRadians)+(this.options.yPos-y0)*Math.cos(degreesAsRadians);

这是一个视频。 在视频中，红色框正确显示了 newWidth、newHeight，但是rotatedXPos 和 rotatedYPos 不会在新旋转向量的顶部/左侧计算。我希望得到任何帮助，非常感谢！

Answer 1

如果你知道椭圆的中心在哪里 (xc, yc) 那么边界框的左上角就是

(xc - newWidth/2, yc - newHeight/2)

（假设 +x 向右移动，+y 向下移动）。