![](/img/trans.png)
[英]How to calculate x and y coordinates of a rotated 3D cube in JavaScript?
[英]How to find the x,y coordinates of a rotated vector
我发现了从不同的堆栈溢出位置计算矢量旋转后边界框宽度和高度的最佳方法。 这很棒。 我现在的问题是计算旋转矢量边界框的新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
。 我希望有任何帮助,非常感谢!
如果您知道椭圆的中心在(xc,yc),则边界框的左上角是
(xc - newWidth/2, yc - newHeight/2)
(假设+ x正确,而+ y降低)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.