2012-03-07 18 views
0

私は特定の場所にRaphaël.jsので個々の要素をアニメーション化していた場合、私は要素x属性設定次のコードを使用することができますRaphael.jsセットを特定の場所に移動するにはどうすればよいですか?

elem.animate({x: specific_X_Location}, 1000); 

を私は移動する方法を発見しましたsetを特定の場所に送信します。

2件のSO記事がある: accessing a set inside a set in raphael js、およびセットに所定の距離を変換する方法について説明
How is set animation done in Raphael?
(すなわち最大100により設定された権利100、または移動)は、例えば変換または翻訳し、使用

var mySet = paper.set(); 
mySet.push(...add elements to set); 
mySet.animate({transform: "t100,0"}, 1000); // move my set right by 100 

ただし、セット全体を特定の場所に移動する方法はありません。

ファイヤーバグのものを見ると、最後には配列があり、それはxまたはyの属性を持たないのです。

個別に対処することなくセットの要素に関する情報にアクセスできますか?

セットを特定の場所に変換するには、特定の要素の変換を行い、その移動をセット全体に適用する必要があると思いますか?それとも私が逃した良い方法がありますか?

ありがとうございました

+0

「t100,0」の代わりに「T100,0」などの絶対変換コマンドを調べましたか? http://raphaeljs.com/reference.html#Element.transform – Jay

答えて

4

あなたはセットが単なるアレイであることは間違いありません。 そして、悲しいことに、少なくとも私が集めたものから、全体のセットを移動する簡単な方法はありません。 私は、プロジェクトiveでこの同じ問題に直面していました。 このセットは、大きなグループのオブジェクトに属性などを適用するのに最も便利なようです。あなたがスクリーン上に100個の赤い円があなたの男であることを望むなら、言ってください。 しかし、トランスフォームをセットに適用しようとすると、アトリビュートを適用するのと同じ方法で動作します。これはセット全体に適用されます。つまり、すべてのサークルは、1つではなく、同じ座標と縮尺などに移動します。

yourSet.exclude(paper.getById('2')); 

あなたは、このような特異なオブジェクトに変換を適用することができますセットから、あなたのオブジェクトを除外した後:次のように - 私が使用している周り 作品は除外してgetById使用することです。

paper.getById('2').transform('t230,265s3'); 

次に、移動するオブジェクトごとに繰り返します。

大規模なセットではこれは非常に面倒ですが、(オブジェクトのグループに属性を適用しない限り)単なるvar構文を使用することもできます。

これを行うために配列の構文と数式を使用する方法があるのですが、オブジェクト間のすべての関係を把握しなければならないのでしょうか。

さらに、新しいリリースのRaphaelには、ある種の簡単なセットトランスフォームが含まれているかどうかがわかります。それは天才だろう。

+0

良い説明Matt。どうもありがとう。 – Joe

+0

FYI、それだけで移動するためにオブジェクトをセットから削除する必要はないことに気付きました。私は1つのattrを変更すると、システムを混乱させるかもしれないと思う。しかし、トランスフォームは、まだセットに入っているオブジェクトにも適用できます。 – mattelliottIT

+3

最新のバージョンでは、実際にはtransformコマンドを使って次のようにセット全体を移動できることに気付きました。 mySet.transform( 't-100,100'); スケール変換構文の全体を書き出す場合は、セット全体のスケーリングを行うこともできます。 mySet.transform( 's3,3,0,0'); これは、スケールが各アイテムの中心ではなくセットの中心を使用するため、個々のアイテムの位置を変更するのを止めます。 これがうまくいき、遅すぎることを望みます! – mattelliottIT

関連する問題