计算旋转后的新x和y坐标

我正在围绕它的中心旋转jCanvas图层，但在此之后，我需要计算其新的x和y坐标。我使用下面的代码，虽然它返回错误值：计算旋转后的新x和y坐标

var rotation = layer.rotate * Math.PI/180; 

//object's middle 
var middleX = layer.x + layer.width/2; 
var middleY = layer.y + layer.height/2; 

//new coords (wrong) 
var newX = middleX * Math.cos(rotation) - middleY * Math.sin(rotation); 
var newY = middleX * Math.sin(rotation) + middleY * Math.cos(rotation);

对于简单的旋转 - 例如90度，我可以得到新的角落的x和y这样的：

var middleX = layer.x + layer.width/2; 
var middleY = layer.y + layer.height/2; 
var newX = middleX - layer.height/2; 
var newY = middleY - layer.width/2;

但什么关于更复杂的情况？

编辑：

我找到这个公式，但它工作正常，只有当我顺时针旋转。逆时针旋转怎么样？

var newX = (layer.x - middleX) * Math.cos(rotation) - (layer.y - middleY) * Math.sin(rotation) + middleX; 
     var newY = (layer.x - middleX) * Math.sin(rotation) + (layer.y - middleY) * Math.cos(rotation) + middleY;

来源

2012-12-30 Marek M.

你说的它的X和Y值是什么意思？如果围绕中心旋转，则其中心的X/Y不会改变。 –

这是什么问题？我的意思是输出 – unsym

XY是什么？边界框或左上角？中间的X/Y将和Chris说的一样。 –

您将要围绕中心，并获得新的坐标角落。假设你想获得最大的边框与角度不是90度：

var theta = layer.rotate*Math.PI/180.; 

// Find the middle rotating point 
var midX = layer.x + layer.width/2; 
var midY = layer.y + layer.height/2; 

// Find all the corners relative to the center 
var cornersX = [layer.x-midX, layer.x-midX, layer.x+layer.width-midX, layer.x+layer.width-midX]; 
var cornersY = [layer.y-midY, layer.y+layer.height-midY, midY-layer.y, layer.y+layer.height-midY]; 

// Find new the minimum corner X and Y by taking the minimum of the bounding box 
var newX = 1e10; 
var newY = 1e10; 
for (var i=0; i<4; i=i+1) { 
    newX = min(newX, cornersX[i]*Math.cos(theta) - cornersY[i]*Math.sin(theta) + midX); 
    newY = min(newY, cornersX[i]*Math.sin(theta) + cornersY[i]*Math.cos(theta) + midY); 
} 

// new width and height 
newWidth = midX - newX; 
newHeight = midY - newY;

来源

2012-12-30 23:52:43 unsym

实际上，它仍然无法工作 - 它给我的坐标方式太大或太小...那些角X，角Y数组是什么意思？为什么我应该找到相对于中心的角落？ –

@nienawiedzony编辑，现在它给90,180,270正确的值。但另一种情况真的取决于你想要什么，我使用包含旋转矩形的最大矩形。由于矩形由四个角限定，因此只需知道这四个角的扩展就可以定义一个新的矩形。 – unsym

完美的作品，非常感谢你！ –

-1

var theta = layer.rotate*Math.PI/180.; 
    // Find the middle rotating point 
    var midX = layer.x+ layer.width/2; 
    var midY = layer.y+ layer.height/2; 
    // Find all the corners relative to the center 
    var cornersX = [layer.x-midX, layer.x-midX, layer.x+layer.width-midX, layer.x+layer.width-midX]; 
    var cornersY = [layer.y-midY, layer.y+layer.height-midY, midY-layer.y, midY-(layer.y+layer.height)]; 
    // Find new the minimum corner X and Y by taking the minimum of the bounding box 
    var newX = 1e10; 
    var newY = 1e10; 
    for (var i=0; i<4; i=i+1) { 
     newX = cornersX[i]*Math.cos(theta) - cornersY[i]*Math.sin(theta) + midX 
     newY = cornersX[i]*Math.sin(theta) + cornersY[i]*Math.cos(theta) + midY 
    }

来源

2013-09-28 11:15:10 Mallika

计算旋转后的新x和y坐标

回答

相关问题