1

jCanvasレイヤーをその中心を中心に回転させていますが、その後、新しい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;
4

2 に答える 2

1

中心を中心に回転し、新しいコーナー座標を取得しようとしています。角度が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-30T23:52:43.043 に答える
-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-28T11:15:10.890 に答える