RAPHAELIST

Raphael.jsは日本語ドキュメントが少ないので、初心者には敷居が高いのを何とかするブログ

【Raphael.js】Raphaelエレメントを隠したり再表示したりする方法

hide関数とshow関数

Raphaelで描画したエレメントを一時的に隠したり、再表示させる事ができます。もう一度使うかもしれないエレメントはhide関数で隠し、必要になった時にはshow関数で再表示させましょう。

 

実行結果

解説

Hideボタンで隠れ、Showボタンで再表示させます。

 

Element.hide();

  • Element: 隠したいRaphaelエレメント
  • 返り値: 隠された後のエレメント

 

Element.toFront();

  • Element: 再表示させたいRaphaelエレメント
  • 返り値: 再表示後のエレメント

【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変更後のエレメント

【Raphael.js】Raphaelでよりカッコいいグラデーション背景を作る方法

【Raphael.js】Raphaelでグラデーション背景を作る方法 - RAPHAELISTの二番煎じ記事です。

 

グラデーションを二枚重ねれば

なんかカッコよくなります。前面のグラデーションを透過させ、背面のグラデーションとのミックスを行っています。

 

実行結果

 

解説

さすがにPhotoshopのように複雑な色調補正は出来ませんが、それっぽく仕上がりますね。CSS3などでも出来るかもしれませんが、IEなどへの対応やopacityが子要素にも影響してしまうなどといったことを考えるとこちらの方が遥かにスマートです。CSS3なんていらんかったんや！ そろそろお分かりいただけましたか？単なるグラフライブラリなんかではないという事に。

【Raphael.js】Raphaelでグラデーション背景を作る方法

画面いっぱいにrectを広げるだけ？

はい。これだけです。ただ、ウィンドウサイズの変更に応じてストレッチさせたいので、サンプルではjQueryを使用してwindowサイズを取得し、ウィンドウがリサイズされたタイミングでrectエレメントのサイズも変更しています。

 

実行結果

 

解説

あとはこの背景の上に色々おいていけば良いわけです。めでたしめでたしです。ここではテクニックとしてscale関数を使用しています。

【Raphael.js】エレメントの透明度色々

opacity属性

透明度を変更するには属性でopacityの値を決めるだけでOKです。0から1の値を入れることで、透明度を変更できます。1であれば完全不透明で、0であれば何も見えなくなります。他に"fill-opacity"属性や"stroke-opacity"属性などもあり、塗だけの透明度や境界線の透明度だけを変更する事も出来ます。

 

実行結果

 

解説

透明度は色指定時にrgbaなどでアルファ値を入力する事で調整する事も出来ます。また、境界線のみの透明度を指定した場合、少しかっこ悪い事になります。これは境界線の中心線がエレメントの輪郭を通っている為です。綺麗に見せるには別々のエレメントとして描画してやるしかないかと。

Element.attr(opacity:number);

  • Element: 透明化対象となるRaphaelエレメント
  • number: ０～1の数値でエレメントの透明度を指定する
  • 返り値: 透明化処理後のエレメント

 

Element.attr("fill-opacity":number);

  • Element: 透明化対象となるRaphaelエレメント
  • number: ０～1の数値でエレメントの塗りの透明度を指定する
  • 返り値: 透明化処理後のエレメント

 

Element.attr("stroke-opacity":number);

  • Element: 透明化対象となるRaphaelエレメント
  • number: ０～1の数値でエレメントの境界線の透明度を指定する
  • 返り値: 透明化処理後のエレメント

【Raphael.js】シャドウやグロー表現に使えるglow関数の使い方

glow関数

Raphaelの関数の中で異彩を放つのがこの関数です。アニメーションはできませんが、光彩表現、やドロップシャドウに使えそうです。

 

実行結果

 

解説

使い方はattr関数と同様、連想配列を渡して指定する感じです。渡せるパラメータはぼかす大きさ、塗りの実施、透明度、オフセット、色が指定できます。

Element.glow( array );

  • Element: Raphaelエレメント
  • array: パラメータを格納した連想配列
  • width: 光彩の幅
  • fill: 内部を塗る場合はtrue。デフォルトはfalse。
  • opacity: 透明度を0～1で指定。デフォルトは0.5。
  • offsetx: x方向にずらす距離を指定。デフォルトは0。
  • offsety: y方向にずらす距離を指定。デフォルトは0。
  • color: 色を指定。
  • 返り値: 作成されたエレメント