今回パクオマージュするのはコレ TweenJS | Tween Circles Demo 「かっこいいやんけ・・・・」 CreateJSで公開されているデモです。クール。ただ、これ・・・Raphaelでもできそうやないの！ちょっと試してみるかあ！という事でオマージュしてみたいと思いま…
【Raphael.js】指定時間後にアニメーションを動かす方法 delay関数 基本的にアニメーションはanimate関数の後に即実行されます。数秒後に動かすディレイ効果を追加したい場合、delay関数を使用します。delay関数はアニメーションオブジェクトが持っている関…
最近、テザリング欲しさにAndroid機種に変更したのですが、この標準ブラウザがSVGに対応していないらしく、早速挫折感を味わっています。 raphael.jsでさえその実行結果が表示されないという事は、あのIEでさえ実装していたVMLにさえ対応していないという事…
SVGで円の弧を描く 今日のテーマは円弧の描画です。Raphael.jsではそれは可能ですが、SVGの規約に則ったパス文字列を指定しなければ正しい円弧を描く事はできません。パス文字列…あのややこしいやつです。Raphael標準の描画メソッドにあってもよさそうなもの…
data関数 data関数を使用すると、エレメント固有の情報をエレメントごとに持たせておくことが出来ます。名札をつけて雑多なエレメントの中から目的のものを探すといった使い方から、グラフのデータを格納したりと様々な利用方法があります。地味な関数ながら…
Raphaelがアップデートされているようです。 内容は大まかに ・新しい関数の追加 ・paper.Fontが改行に対応し、関数の戻り値を ・eveイベントがraphael名前空間の中に ・matrixなどのバグフィックス などなど。関数はエレメントの情報を取得するBBox系が大幅…
hover関数 hover関数を使用すると、マウスがエレメント内部に侵入した場合と出て行った時の両方のイベントを追加できます。使用頻度は何気に高そうです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/gerWz/embedded/result/ 解説 エレメント内にマ…
アニメーション方式は全部で8つ Raphael.jsでは8つのアニメーション方式があります。jQueryやmootoolsなどではおなじみの動きです。ここでは実際にそれらのアニメーションがどのように動くのかを見てみましょう。 実行結果 FullScreen http://jsfiddle.net/n…
animate関数 Raphael.jsの中で最も光り輝いている部分があるとすればずばりコレ！アニメーション機能です。この関数を使えば、様々なアニメーションが可能になります。 使い方はattr関数と非常によく似ています。animate関数はアニメーションさせる属性に加…
click関数 Raphaelエレメントをクリックした時のイベントを追加する方法です。この辺は比較的親切な設計になってますね。click関数の引数にハンドラを渡すだけでOKです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/V2MBB/embedded/result/ 解説 ク…
clone関数 複雑な過程で描いたRaphaelエレメントがあったとします。そんな超大作エレメントをもう一つ作る必要が出てきました。そんな時はエレメントをコピペしましょう。コピペはcloneメソッドです。 実行結果 FullScreen http://jsfiddle.net/nekosmash/Rz…
rotate関数 Raphaelのエレメントを回転させる事ができます。角度と軸となるポイントを指定することで回転可能です。 実行結果 フルスクリーンhttp://jsfiddle.net/nekosmash/5NMXz/embedded/result/ 解説 角度だけを指定した場合は、自動的にエレメント全体…
getBBox関数 拡大縮小などを行ったRaphaelエレメントのサイズを取得したい時があります。そんな時はgetBBox関数を使用してBoxエレメントを取得すれば一発で解決です。 実行結果 フルスクリーンhttp://jsfiddle.net/nekosmash/K69v6/6/embedded/result/ 解説 …
scale関数 Raphaelエレメントの拡大縮小を行える関数があります。変更後のサイズを指定するのではなく、倍率を指定することで大きさの指定を行います。 実行結果 解説 幅拡張をクリックするとrectエレメントの横幅が、高さ拡張をクリックするとrectエレメン…
hide関数とshow関数 Raphaelで描画したエレメントを一時的に隠したり、再表示させる事ができます。もう一度使うかもしれないエレメントはhide関数で隠し、必要になった時にはshow関数で再表示させましょう。 実行結果 解説 Hideボタンで隠れ、Showボタンで再…
toBack関数とtoFront関数 Raphaelは基本的に最後に描画したものが最前面に表示される仕組みになってます。背面に回ってしまったエレメントを前面に持ってきたい場合などもあると思います。前面に持ってきたいが為に、せっかく描画したものを消して、再描画す…
【Raphael.js】Raphaelでグラデーション背景を作る方法 - RAPHAELISTの二番煎じ記事です。 グラデーションを二枚重ねれば なんかカッコよくなります。前面のグラデーションを透過させ、背面のグラデーションとのミックスを行っています。 実行結果 解説 さす…
画面いっぱいにrectを広げるだけ？ はい。これだけです。ただ、ウィンドウサイズの変更に応じてストレッチさせたいので、サンプルではjQueryを使用してwindowサイズを取得し、ウィンドウがリサイズされたタイミングでrectエレメントのサイズも変更しています…
opacity属性 透明度を変更するには属性でopacityの値を決めるだけでOKです。0から1の値を入れることで、透明度を変更できます。1であれば完全不透明で、0であれば何も見えなくなります。他に"fill-opacity"属性や"stroke-opacity"属性などもあり、塗だけの透…
使えます 単刀直入になりますが、普通に使えますね。あまり使う機会は無いかもしれませんが…。 実行結果
glow関数 Raphaelの関数の中で異彩を放つのがこの関数です。アニメーションはできませんが、光彩表現、やドロップシャドウに使えそうです。 実行結果 解説 使い方はattr関数と同様、連想配列を渡して指定する感じです。渡せるパラメータはぼかす大きさ、塗り…
個別描画 VS まとめて描画 青コーナー！繊細な描画に定評のあるコベツ選手の入場です。迎え撃つ赤コーナーは配列の描画をまとめて行うジェイソン選手！その剛腕が期待されます！ 競技のルールは至ってシンプル。格子状の矩形を計2500個早く描画したら勝ちで…
Setオブジェクトとpush関数 若干add関数とも似ていますが、まとめて属性指定などができるという点で少し違います。例えば、10個のRaphaelエレメント全てを赤色で塗る場合、add関数や通常のattr関数は10回、fill属性の指定が必要になります。これは面倒ですね…
add関数 Raphaelエレメントに関する情報を持った配列があったとします。この配列を分解して、いちいち描きだすのは面倒ですよね。そこでこのadd関数を使うわけです。add関数にJSON形式の配列を渡してやると、その内容を一気に描きだしてくれます。属性などの…
普通にスケスケになってくれます 画像に関しては 【Raphael.js】画像を埋め込む方法 - RAPHAELIST に詳しく書いてます。RaphaelはSVGライブラリですが、透過画像が使えるという事は、その画像の重ね合わせでラスタベースのアニメーションも作れそうですね！
目立ちたがりのRaphaelちゃん 【Raphael.js】HTMLエレメントとRaphaelエレメントを同居させる - RAPHAELIST ここで、Raphaelエレメントの描画域をフルスクリーン指定し、HTMLと同居させましたが、HTMLエレメントが隠れてしまうのは都合が悪い時もあるかと思…
"stroke-linecap"属性と "stroke-linejoin"属性 さて、ここでは線端の形状と接続面の描画について説明します。 実行結果 まずは実行してみましょう。大体これで感じは掴めるかなと思います。 解説 線端とか接続面とか難しく書いてますが、要はペン先の丸いサ…
水と油 【Raphael.js】描画エリアを決める - RAPHAELIST こちらの記事では、id名が canvas というdiv要素を作って、その中に描画するようにしています。しかし、その状態でdivタグの中にテキストを入力してみると・・・ これはまずい！Raphaelがdiv要素を占…
stroke-dasharray属性 線を点線、破線にする"stroke-dasharray"属性について説明します。破線も様々なスタイルが選択できますが、直感的なパターン文字列を属性値として指定することで破線を形成していきます。 実行結果 以下サンプルです。再生ボタンで実行…
stroke属性 とはいえ、デフォルトですでに黒い境界線が描かれちゃうわけですが。stroke属性は、その境界線の色を変更します。 実行結果 再生ボタンで実行！ 解説 テキストは初期値で境界線が描かれないので誤解されるかもしれませんが、テキストにも境界線を…
