【Raphael.js】エレメントをグループ化する方法

Setオブジェクトとpush関数

若干add関数とも似ていますが、まとめて属性指定などができるという点で少し違います。例えば、10個のRaphaelエレメント全てを赤色で塗る場合、add関数や通常のattr関数は10回、fill属性の指定が必要になります。これは面倒ですね。 ところが、Setオブジェクトを用いると、一括で一律の属性を与えることが出来ます。手順としては、グループの枠となるSetオブジェクトを準備し、そのsetオブジェクトが持つpush関数内でグループの内容を記載する感じです。すると、このSetオブジェクトはひとつのグループとして扱われ、グループ単位でattr関数などが使用できるようになるのです。 長くなりましたが、要はエクセルのグループ化と同じです。

実行結果

解説

例えば、着色以外にもグループ化したオブジェクトの移動などで威力を発揮しそうです。ただし、今回紹介したpushはSetオブジェクトの最も基本的な部分です。他にも関数はあるのですが、それはまた別の機会に。

Paper.set();

• Paper: Raphaelの描画域
• 返り値: Setオブジェクト

Set.push( drawing );

• Set: 作成したSetオブジェクト
• drawing: ここでRaphaelエレメントを描画
• 返り値: 作成されたエレメント