0

Raphael JSを使用して、3 つの要素からなる単純な 2D 車を作成しました。そのために、イメージとしてのボディと 2 つのタイヤがあります。アニメーションでタイヤを回転させたいので、要素を分離しました。

var curCar = raphael.image("car.png", /* x */ 0, /* y */ 0, /* width */ 120, /* height*/ 82)
var tires = raphael.set();
tires.push(
    raphael.image("tire.png", 2, 50, 32, 32),
    raphael.image("tire.png", 84, 50, 32, 32)
);

ご覧のとおり、タイヤは車の「下」に配置されており、すでに正しい位置に配置されています。現在、curCar は Raphael.animate を使用してパスをたどりますが、これは正常に機能します。アニメーションを更新するたびに、タイヤを curCar の位置に変換します。次のようになります。

function animationUpdate (pos) {
    curCar.transform("t" + [pos.x, pos.y] +" r"+ pos.alpha);
    tires.transform("t" + [pos.x, pos.y ]);
};

"t" は translate(x,y) を表し、r は回転を表します。これらの値は Raphael によって自動的に計算されます。直線経路をたどる場合、これはすべてうまくいきますが、curCar が回転するとすぐに、タイヤの計算が失敗します。

例：

curCar は x: 100 / y: 200 の位置にあり、10° 回転しています。タイヤは x:102 / y:150 および x: 184 / y: 250 に変換されます。したがって、curCar は 10° 回転し、タイヤはずれています。

私の主な質問は次のとおりです。

回転を考慮して正しい X/Y 位置を計算するにはどうすればよいですか? これを行う共通の数式が存在する必要があります。

4

2 に答える 2

1

車全体の翻訳は、しばらく置いておきます。車とそのタイヤを回転させたいとします。タイヤごとに、回転行列を古い中心に適用することで、新しい中心を見つけることができます。

x' = x∙cos α − y∙sin α
y' = x∙sin α + y∙cos α

ラファエルは左上隅を画像の位置として使用していると思います。その場合、元の中心は (2+32/2, 50+32/2)=(18,66) および (84+32/2, 50+32/2)=(100,66) になります。したがって、これらは(x, y)上記の式になります。結果の位置は再び中心位置になるため、すべての座標から 16 を引く必要があります。車全体の変換は、その結果に単純に追加できます。

于 2013-04-30T05:50:04.020 に答える