4

Box2Dweb でシミュレートされたボディと、ボディに添付された画像があります。体の変換行列を取得し、画像に変換を適用して (変換を使用して画像を描画)、画面上の位置と向き (相対) が体の位置と向きに一致するようにします。KineticJS の変換行列で使用する関数が見つかりません。移動と回転には別々の関数があり、Kinetic.Transform内部に「行列」を保持するクラスがありますが、それをどうするかわかりません。どこかに関数もありますが、これも_setTransform使い方がわかりません (アンダースコアは、直接呼び出してはならないことを示していますか?)。

このコードを使用して、プレーンな Javascript でボディに画像を描画しました。

function drawImageOverBody(context, body, image, scale)
{
    context.save();
    var pos = body.GetPosition();
    var center = [scale*pos.x, scale*pos.y];
    var R = body.GetTransform().R;
    context.translate(center[0], center[1]);
    context.transform(R.col1.x, R.col1.y, R.col2.x, R.col2.y, 0, 0);
    context.translate(-center[0], -center[1]);
    context.drawImage(image, center[0] - image.width/2.0, center[1] - image.height/2.0);
    context.restore();
}

KineticJS で同じことを行うにはどうすればよいですか?

編集: どうやら、Box2d から取得できる唯一の変換は平行移動と回転です。これは、Box2d 本体でGetPosition()とGetAngle()を呼び出して取得し、 と で KineticJS イメージに適用しsetX(), setY()ますsetRotation()。したがって、ここではマトリックス形式での変換は必要ありません。それでも、好奇心旺盛です。

4

1 に答える 1

0

このKinetic.Transformクラスを使用して、特定の変換行列から回転、スケール、およびオフセットを計算できます。mの属性を変換行列に設定しKinetic.Transform、変換オブジェクトを使用して回転、スケール、および変換を計算します。回転、縮尺、平行移動は、どのようなものにも適用できます。Kinetic.Node

翻訳は、マトリックスの最後の2つの項目によって直接与えられます。

他の場所から変換を取得した場合は、次のKinetic.Transformように適用できます。

var tf = new Kinetic.Transform（）;
tf.m = [Math.sqrt（2）、Math.sqrt（2）、-3/2 * Math.sqrt（2）、3/2 * Math.sqrt（2）、4、5];

翻訳が最も簡単です。それは最後の2つの要素によって与えられます：X方向に4つ、Y方向に5つ。それを取得する方法もあります。

var translation = tf.getTranslation（）;

変換行列からスケールを取得できます。

var m = tf.getMatrix(); // or tf.m
var scaleX = Math.sqrt(m[0]*m[0] + m[1]*m[1]);
var scaleY = Math.sqrt(m[2]*m[2] + m[3]*m[3]);

画像はX軸またはY軸、あるいはその両方で反転できることを忘れないでください。それを考慮に入れるために行列式を計算します。

if(m[0]*m[3] - m[1]*m[2] < 0){
    scaleY = -scaleY;
}

スケールの符号を調整して、回転をより簡単にします。

if(m[0] < 0){
    scaleX = -scaleX;
    scaleY = -scaleY;
}

最後は回転です。Math.asinまたはを使用して取得できますがMath.acos、回転角の象限を考慮する必要があります。これはそれを解決する1つの方法です：

var angle = Math.acos(m[3] / scaleY);
if(m[2]/scaleY > 0){
    angle = -angle;
}

さまざまな変換を適用する順序が重要であることに注意してください。上で説明した方法を使用する場合は、最初に平行移動を適用し、次に回転を適用し、次にスケーリングを適用します。

于 2013-02-23T21:22:19.603 に答える