【Raphael.js】エレメントのz-indexを調整する方法

toBack関数とtoFront関数

Raphaelは基本的に最後に描画したものが最前面に表示される仕組みになってます。背面に回ってしまったエレメントを前面に持ってきたい場合などもあると思います。前面に持ってきたいが為に、せっかく描画したものを消して、再描画する方法は効率的とは言えません。ここではtoBack関数とtoFront関数でエレメントのz-indexを調整する方法を記載します。

実行結果

解説

ボタンを押すと、紫の矩形のz-indexが変わります。toBackで紫矩形は最背面に。toFrontで最前面に移動します。

Element.toBack();

• Element: 最背面に移動させるRaphaelエレメント
• 返り値: z-index変更後のエレメント

Element.toFront();

• Element: 最前面に移動させるRaphaelエレメント
• 返り値: z-index変更後のエレメント