4

回転後の座標情報を保持する必要があり、必要な計算に苦労しています。

特定のトリミング座標を持つ画像があります。これらの座標は、次のオブジェクトとして指定されます。

{
      h:  139.68333435058594,
      w:  139.68333435058594,
      x:  60.31666564941406,
      x2: 200,
      y:  80,
      y2: 219.68333435058594
}

次に、この画像（これはキャンバス要素です）を回転させますが、元の切り抜きをそのままにして、新しい座標に回転を正確に反映させたいと思います。

たとえば、400x400画像の左上の4分の1が選択されている場合、返される座標はx：0、y：0、x2：200、y2：200になります。左に-90度回転すると、新しい座標はx：0、y：200、x2：200、y：400になります。

これらの新しい座標を計算する関数をどのように作成しますか？

どうもありがとう。

この質問を適切に視覚化するために、簡単な画像を含めました。

ここに画像の説明を入力してください

編集：上の画像の大きな正方形は、私が回転させている写真です。中点を中心に回転しており、トリミング座標は画像自体を基準にしています。回転すると、新しい座標を再計算する前に実際の座標平面がリセットされます。つまり、画像/コンテナの左上の点は常に0,0になります。

4

3 に答える 3

3

この関数は、回転行列アルゴリズムを使用します

function rotate(x, y, xm, ym, a) {
    var cos = Math.cos, sin = Math.sin,
    a = a * Math.PI / 180, // Convert to radians 
    // Subtract midpoints, so that midpoint is translated to origin
    // and add it in the end again
    xr = (x - xm) * cos(a) - (y - ym) * sin(a)   + xm,
    yr = (x - xm) * sin(a) + (y - ym) * cos(a)   + ym;

    return [xr, yr];
}

alert(rotate(0, 0, 200, 200, -90));​ // 0,400

JSFiddle

于 2012-09-26T14:54:27.047 に答える
2

左上隅は次のようになります。

0, heightImg - heightCrop

右下は次のようになります。

widthCrop, widthImg

これは、作物が回転する前に左上隅にぴったり合っていることを前提としています。

一般的な数学については少し後で説明します。

点（A）を点（B）の周りで角度（C）だけ回転させる式は次のとおりです。

N.x = (A.x-B.x) * cos(c) - (A.y-B.y) * sin(c) + B.x
N.y = (A.y-B.y) * cos(c) + (A.x-B.x) * sin(c) + B.y

90度回転しているので、これらを減らすことができます。[cos（90）= 0、sin（90）= 1]

N.x = 0 - (A.y-B.y) + B.x = B.x + B.y - A.y
N.y = 0 + (A.x-B.x) + B.y = B.y + A.x - B.x

したがって、左上の点の座標でこの式を使用すると、左下の点が得られます。（xは正しいですが、新しい左上のポイントの正しいy値を取得するには、トリミング領域の高さを差し引く必要があります）

于 2012-09-26T14:52:28.840 に答える
2

（座標系の）（0,0）点を中心に反時計回りに90度回転するための行列は次のとおりです。

  0 1
 -1 0

これはコードで次のように変換されます。

new_x = y; new_y = -x;

ただし、（200,200）を中心に回転させたいので、ポイントを回転させる前にポイントを移動し、後でポイントを戻す必要があります。

new_x = (y-200) + 200;
new_y = -(x-200) + 200;

簡略化すると、これはただ

new_x = y; new_y = 400-x;

そのようにすべてのトリミング座標を変換できるはずです。

于 2012-09-26T14:56:42.597 に答える