twitterで svg.jsというライブラリを見かけたので触ってみました。

SVG.JS によると、SVG.JS とは「A lightweight library for manipulating and animating SVG.」、すなわち「SVG を操作したりアニメートさせたりするための軽量 JavaScript ライブラリ」ということです。




実際、作者Wout Fierens氏のドキュメントからは、少しでもライブラリを軽量にするための並々ならぬ努力が伝わってきます。

使用方法は Github の ReadMe に詳しく載っています。英語ドキュメントですが、平易な英文にコード例が添えられていますので、それほど苦労せずに読めると思います。

また、具体的なテスト例がこちらにあります。リンク先のテストページの下まで見てみればイメージがつかめます。

まだざっとドキュメントを読んだだけで詳しくは理解していないのですが、とりあえずサンプルを一つ書いてみました。たいしたものではありません。

下の赤丸をマウスでドラッグすると、水色の丸が後をついてきます。
水色の丸をマウスで捕まえようとすると逃げていきます。

SVG対応ブラウザが必要となります。最近の Firerox や chrome、モバイル系のブラウザは大丈夫ですが、IE はバージョン9以降が必要です。



コードは下記のとおりです。svg.min.jsのほかに、svg.jsのプラグインである svg.draggable.min.jsも必要です。これは文字通り、element に dragable()メソッドを適用するために必要なプラグインで、これによってマウスで element をドラッグ可能になります。

<!doctype html>
<head><title>svg.js test</title></head>
<body>
<style>
   #box {
      border: solid 2px gray;
      height: 320px; width: 420px;
      background-color:#dcdcdc;
   }
</style>
<div id="box"></div>
<script src="svg.min.js"></script>
<script src="svg.draggable.min.js"></script>
<script>
   ( function() {
      var
         height = 320,
         width  = 420,
         diameter = 32,
         draw = svg( 'box').size( width, height),
         circle1  = draw.circle( diameter ).attr({ fill: '#0ff'}).move( 170, 144 ),
         circle2  = draw.circle( diameter ).attr({ fill: '#f06'}).move( 210, 144 ).draggable();
      circle1.on( 'mouseover', function() {
         circle1.animate().move(
            Math.round( Math.random() * ( width  - diameter ) ),
            Math.round( Math.random() * ( height - diameter ) )
         );
      });
      circle2.dragend = function() {
         var x2 = circle2.attr( 'x' );
         circle1.animate().move(
            x2 + ( x2 > width / 2 ?  -diameter :  + diameter ),
            circle2.attr( 'y')
         );
      };
   }());
</script>
</body>
</html>

svg.min.js は上にも書いたSVG.JSでダウンロードできます（リンク先ページの一番下にダウンロードリンク）。

プラグインのsvg.draggable.min.jsはやはり著者の Githubから落とせます。リンク先ページ中のコードをコピーして、適当なエディタで svg.draggable.min.js という名前で保存します。

以下、少しだけ解説しておきます。

draw = svg( ‘box’).size( width, height)

この行で htmlの要素内に svg を生成します。svg の引数は要素のID名でも、直接要素を指定しても構いません。
(例) draw = svg( Document.getElementById(‘box’))
メソッドチェーンにより、size()メソッドでサイズを指定しています。

circle1 = draw.circle( diameter ).attr({ fill: ‘#0ff’}).move( 170, 144 )

ciircle()メソッドにより、draw(SVG)内に円を生成します。引数は直径です。circle()の他にも、Rect(長方形）、Ellipse(楕円）、Polyline(多角線）、Polygon(多角形）なども生成できます。Path()を使って曲線を描いたり、Image(画像）やText(テキスト）を挿入することもできます。詳しくは ReadMe のElement の項をお読みください。

やはりメソッドチェーンで、attr()メソッドで属性値（ここではFill色）を指定し、move()で指定した x座標、y座標に移動させます。

circle2 = draw.circle( diameter ).attr({ fill: ‘#f06’}).move( 210, 144 ).draggable();

二つ目の円もパラメータが多少違うだけで同様に生成しますが、最後に draggable()メソッドを適用しているのに注意してください。これでこの element がマウスでドラッグ可能になります。

circle1.on( 'mouseover', function() {
   circle1.animate().move(
      Math.round( Math.random() * ( width  - diameter ) ),
      Math.round( Math.random() * ( height - diameter ) )
   );
});

一つ目の円に、”on”メソッドでマウスオーバーイベントを割り当てています。コールバック関数は、ここでは無名関数で指定していますが、変数により指定することもできます。




割り当て可能なイベントは、ほかに click、dblclick、mousedown、mouseup、mouseover, mouseout, mousemove 等のほかに、touchstart や touchend、touchmove、touchcancel などのタッチイベントも利用可能です。詳しくはやはり ReadMe のEventをお読みください。。

circle2.dragend = function() {
   var x2 = circle2.attr( 'x' );
   circle1.animate().move(
      x2 + ( x2 > width / 2 ?  -diameter :  + diameter ),
      circle2.attr( 'y')
   );
};

二つ目の円には、draggableの dragend コールバックを指定しています。ドラッグが終了したときに呼び出されるコールバック関数です。draggableのコールバックには、ほかにも beforedrag、dragstart、dragmove の三種類があります。詳しくはCallbacksをお読みください。

投稿タグ
,