アプリ開発やサイト制作のスマホ端末実機検証・テスト-Remote TestKit

スマホ検証 Remote TestKit > Knowledge Note > HTML5 > JavaScriptによるSVG描画 – Raphael（入門編）

JavaScriptによるSVG描画 – Raphael（入門編）

概要 Raphaëlは、SVG,VML技術を利用してベクターグラフィックスを簡単に作成することができるJavaScriptの軽量ライブラリです。 SVG（およびVML）はXMLで記述されるテキストデー …

概要

Raphaëlは、SVG,VML技術を利用してベクターグラフィックスを簡単に作成することができるJavaScriptの軽量ライブラリです。

SVG（およびVML）はXMLで記述されるテキストデータであるため、HTML/XHTMLとの相性がよく、SVG自身で回転、拡大・縮小、移動といった表現が可能であり、動きのある表現が可能です。また、ベクターグラフィックスは、その特性により拡大・縮小してもイメージが劣化しないため、様々な画面サイズを持つモバイルデバイス向けのWebアプリケーションとも相性が良いと言えます。

SVGを使用するためには、SVGの文法を覚える必要がありますが、Raphaëlは、SVGをラッピングしたライブラリであるため、SVGに慣れないユーザでもJavaScriptを書いたことのあるプログラマであれば、簡単にSVGデータを作成することができます。

RaphaëlはFirefox3.0以上、Safari3.0以上、Chrome5.0以上、Opera9.5以上、IE6.0以上と幅広くブラウザをサポートしています。モバイルブラウザでも、全iOS のブラウザ、Android3.0以上のブラウザで利用可能となっています。

ダウンロード

下記のサイトからダウンロードします。

ダウンロードしたファイルを「raphael-min.js」とします。

※以下の説明はRaphaëlのバージョン2.1.0時点で確認した内容となります。バージョンによっては、動作しない可能性があります。

これから紹介するサンプルはこちらで動作するものを見ることができます。

図形を描く

まずは、ライブラリのJavaScriptファイルを読み込みます。

<script type="text/javascript" src="raphael-min.js"></script>

次に、RaphaëlでSVGを描くための、divタグを用意します。

<div id="svg"></div>

さらに、Raphaelオブジェクトを作成し、描画領域を確保します。

//描画領域の設定
var paper = Raphael(&quot;svg&quot;, 800, 200);

第一引数は、タグのID名、第二引数は描画領域の幅、第三領域は描画領域の高さとなります。

ここまでがRaphaëlを使うための準備となります。それでは、早速、円を描いてみます。

円を描くためには、作成したRaphaelオブジェクトに対してcircleメソッドを呼び出します。
circleメソッドの第一引数、第二引数に、円の中心座標(x座標, y座標)を指定し、第三引数に円の半径を指定します。

//描画領域の設定
var paper = Raphael(&quot;svg&quot;, 800, 200);
//円を描画する。
var circle = paper.circle(100, 100, 50);

次に作成した円を変更してみます。
塗りつぶし、枠線の太さ、枠線の色を変更します。

塗りつぶし、枠線の太さ、枠線の色を変更するためには、作成したcircleオブジェクトのattrメソッドにより、対応する属性を変更します。fillは塗りつぶしの色、strokeは枠線の色、stroke-widthは枠線の太さを表します。

circle2.attr({
  // 塗りつぶし
  'fill' : '#87CEFA',
  // 枠線の色
  'stroke' : '#1E90FF',
  // 枠線の太さ
  'stroke-width' : 4
});

その他にも設定可能な属性はあります。
属性の詳細については、Raphaëlのドキュメントを参照してください。

様々な図形を描く

Raphaëlでは円以外の図形も描画することができます。

それでは、四角形と三角形を描いてみます。
四角形はrectメソッドを使用することで描画できます。
円と同じようにattrメソッドにより、枠線や塗りつぶしを変更することもできます。

一方、Raphaëlでは、三角形を作成するメソッドは提供されていません。
そこで、直線の組み合わせによって三角形を作成します。

//四角形を描画する。
var rect = paper.rect(50, 30, 100, 50);
rect.attr({
    'fill' : '  #87CEFA',
    'stroke' : '#1E90FF',
    'stroke-width' : 4
});
// 三角形を描画する。
var triangle = paper.path(&quot;M250,10 L200,100 L300,100 Z&quot;);
triangle.attr({
    'fill' : '#F08080',
    'stroke' : '#CD5C5C',
    'stroke-width' : 4
});

三角形は直線（パス）の組み合わせによって表現します。

M、L、Zなどは、コマンドを意味しています。
Mは開始点への移動（moveto）、Lは指定座標まで線分を引く（lineto）、Zはパスを閉じる（closepath）を意味します。
パスが閉じている場合には、塗りつぶしが可能となります。

上記の例では、具体的に以下のようになります。

  • 直線の開始点とするために(250, 10)に移動する。
  • (250, 10)から(200, 100)に線を引く。
  • (200, 100)から(300, 100)に線を引く。
  • パスを終了する。

パスを組み合わせることで、好きな形の多角形を表現することができます。

色々な線を描く

次に色々な線を書いてみましょう。 直線は、ここまでに説明したようにpathを利用することで表現できます。

// 直線を描画する。
var line = paper.path(&quot;M50,10 L150,60 Z&quot;);

attrメソッドを利用することで、線の種類を変えることができます。
strokeは線の色、stroke-widthは線の太さ、stroke-dasharrayは線の種類を表します。
線の種類には、”.”:点線、”-”:短い線分、”–”:長い線分、” “:破線の間隔 を組み合わせて表現することができます。

line.attr({
    // 線の色
    'stroke' : '#CD5C5C',
    // 線の太さ
    'stroke-width' : 3,
    // 線の種類
    'stroke-dasharray' : '- '
});

続いて直線だけでなく、曲線を描いてみます。
曲線は直線と同様にSVGのパスを利用して表現します。

var curveLine = paper.path(&quot;M50,10 C200,10 50,110 200,110&quot;);
curveLine.attr({
    'stroke' : '#3CB371',
    'stroke-width' : 3,
    'stroke-dasharray' : '- '
});

Mは曲線の開始点、Cはベジエ曲線を描くときの制御点を表します。

SVGの仕様に従えば、直線、曲線の他にも、楕円曲線を描くことができます。
また、直線、曲線、楕円曲線を組み合わせることもできるため、複雑なパスを生成できます。
パスの詳細については、SVGの仕様を参照してください。

アニメーションの設定

最後に作成したオブジェクトにアニメーションの設定をします。
JavaScriptを使用し、イベントを定義することもできますが、ここではRaphaëlの機能を利用します。
まずは、 三角形をクリックすると、回転するようにします。

// クリック時にイベントを設定する。
triangle.click(function(event){
// 90度回線させる。
this.rotate(90);
});



動作するサンプルはこちらで確認することができます。

クリック時のイベントは、生成したRaphaelオブジェクトのclickメソッドを指定するだけです。
引数にはクリック時に実行されるfunctionを設定します。
functionの中でrotateメソッドを呼び出すことで、クリック時に回転するオブジェクトの完成です。

今度はクリックすると、色が変化しながら移動する円を作成します。

circle.state = 'before';
circle.click(function(event){
    if (this.state === 'before') {
        this.animate({'cx':300, 'fill' : '#F08080', 'stroke' : '#CD5C5C'},
        1500,
        'bounce',
        function(event){
            this.state = 'after';
        });
    } else {
        this.animate({'cx':100, 'fill' : '#87CEFA', 'stroke' : '#1E90FF'},
        1500,
        'bounce',
        function(event){
            this.state = 'before';
        });
    }
});

動作するサンプルはこちらで確認することができます。

徐々に変化させたい場合には、animateメソッドを利用します。

animateメソッドの第一引数は、アニメーション終了時の属性値を指定します。
ここでは、円の中心(cx)、塗りつぶし色(fill)、線の色(stroke)を変更しています。

第二引数には変化させるまでの時間を指定します。時間の単位はミリ秒です。

第三引数にはアニメーションの種類を指定します。ここでは、”bounce”を指定しているので、バウンドしながら移動します。
アニメーションの種類には、”linear”:線形、”elastic”:弾力的、”<”:徐々に変更、なども指定できます。
アニメーションの種類に指定可能な値については、Raphaëlのドキュメントを参照してください。

第四引数はcallback処理を表します。

Raphaëlでは他にも、マウスオーバー、ドラッグ&ドロップ、ダブルクリックといった基本的なイベント処理や、
拡大・縮小といった基本的な操作が提供されているため、ユーザが好きなように描画処理をカスタマイズすることができます。

おわりに

これで、Raphaëlを利用したグラフィックの描画から、アニメーション処理まで一通りの使い方を説明しました。
ただし、今回説明したのはRaphaëlのほんの一部の機能に過ぎません。
Raphaëlを利用すれば、表現豊かなUIを実現できるため、次回にもう少し詳しく説明していきたいと思います。

執筆者プロフィール 村田賢一郎

Acroquest Technology 株式会社勤務。Javaによるミッションクリティカルな集中監視システムのフレームワーク開発、およびライフラインを支えるシステム開発に携わる。非同期処理、メッセージング、HAなどが本業である傍ら、Webによる新しいUI表現、開発手法に興味があり、あれこれ模索している。

Facebook にシェア