2015/06/17
SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」
HTML5には、SVG、Canvas、WebGLといった、ビジュアル関係で追加された要素があります。
これらはとても便利で、
インパクトのあるサイト作りには強い味方になります。
ただ、ブラウザや端末により、これらの要素が使えない場合もあります。
クロスブラウザの問題です。
また、SVG、Canvas、WebGLのそれぞれで、強みを発揮する部分が違っており、
強みを発揮するために、それぞれを使いこなそうとすると、
使い方がバラバラなので、多くのことを事前に学習する必要が出てきます。
クロスブラウザ対策のために、ブラウザごとにそれらを切り替えるとなると、
なおさら大変です。
この問題を解決してくれるのが「Two.js」です。
Two.js
Two.js: Examples (公式のDEMO)
「Two.js」はベクター系のグラフィックを扱うことのできる、
JavaScriptのライブラリーで、
簡単にベクターグラフィックを扱えるようになるだけでなく、
SVG、Canvas、WebGLから描画方法を選ぶことができます。
そのため、SVG、Canvas、WebGLそれぞれのために、
別々でコードを書く必要がなくなり、
ブラウザーごとの切り替えも容易になります。
そのため、このライブラリを使うと、
これまで以上にSVG、Canvas、WebGLを使うリスクを下げることができ、
実用での利用を身近なものにしてくれます。
↓作ってみたもの SVG、Canvas、WebGL切り替えのDEMO
切り替わっていることが、ほとんどわからないくらい同じように描画してくれます。
基本的な使い方
公式サイトよりライブラリをダウンロードして、htmlで読み込みます。
|
1 | <script type="text/javascript" src="js/two.min.js"></script> |
次に、グラフィックを描画する領域をhtmlで用意します。
|
1 | <div id="visualArea"></div> |
そして、Two.jsのコードを書きます。
まずは、描画の準備です。
|
1 2 3 4 5 6 7 | var elem = document.getElementById("visualArea"), //描画する要素をid名で指定 //two.jsのオブジェクトを設定 two = new Two({ type: Two.Types["svg"], //描画方法を"svg", "canvas", "webgl"から選択。defaultは"svg" width: 960, //描画領域のwidth height: 480 //描画領域のheight }).appendTo(elem); |
次に、グラフィックを指定して、描画します。
|
1 2 3 4 5 6 | var circle = two.makeCircle(-70, 0, 50); //円を作成 circle.fill = '#FF8000'; //円の色を指定 circle.translation.set(two.width / 2, two.height / 2); //円を中心に移動 two.update(); //描画を実行 |
こちらは円を表示する場合の例です。
アニメーションは以下のように指定します。
|
1 2 3 4 5 6 7 8 | var posCircleX = -50; //アニメーションの設定 two.bind('update', function() { if(posCircleX > 1010) posCircle = -50; circle.translation.set(posCircleX, two.height / 2); //円を移動 posCircleX++; }).play(); //ループ |
アニメーション関連では、
HTML5のrequestAnimationFrameを利用しているので、
安定性の高いものを実現できます。
Illustratorなどで作ったSVGを利用したい場合は以下のようにします。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div id="assets"><!-- CSSでdisplay:noneを指定 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px" height="240px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve"> <path fill="#955C9E" d="M142.079,72.64l76.642-20.946c-21.664-31.288-57.808-51.788-98.744-51.788 c-11.904,0-23.399,1.741-34.255,4.969L142.079,72.64z"/> ・・・ </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve"> <path fill="#FFFFFF" d="M82.562,12.845c5.826-2.241,18.316-0.225,19.578,4.257c1.261,4.481-9.789,26.665-9.789,26.665l-24.13-2.017 C68.222,41.75,76.737,15.085,82.562,12.845z"/> ・・・ </svg> ・・・ </div> |
CSSでdisplay:noneにした要素に読み込ませたいSVGのコードをコピー&ペーストします。
JavaScript
|
1 2 3 4 5 6 7 | var shapes = []; $("#assets svg").each(function(i, el) { //jQueryのeachで配置したインラインSVGを読み込む var shape = two.interpret(el).center(); //読み込んだSVGを配置 shape.translation.set(two.width / 2 , two.height / 2); shapes.push(shape); //描画したSVGを配列に保存(後で操作できるようにするため) two.update(); }); |
こちらの例ではjQueryを合わせて使っています。
jQueryともぶつかることがないので、合わせて使うと、
Two.jsがより使いやすくなります。
Author Profile
SHARE
