計算旋轉後的新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座標

回答

相關問題