さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 16 Jul. 2014

    [Raphaël]SVG描画の基本のキ[JavaScript]

    CATEGORYBlog TAG

    夏です!海に行って泳いで、潜りたいです。須藤です。

    今回はベクター形式描画ライブラリRaphaël.jsを紹介いたします。
    読み方は、ラファエルだと思います。名前かっこいい!
    このライブラリは、
    Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+
    とそこそこ古いブラウザにも対応しているようです。
    SVGが表示できないブラウザでは、別のベクター形式に変換して表示させているようです。

    まず、ベクター(ベクタ)形式とは?
    ベクター形式とは拡大縮小をしても、画像が劣化しない、線をきれいに保つことが出来るものです。
    代表的なものとしてSVGがあります。
    ベクター形式の対比としてはラスタ形式(ビットマップ画像)と言います。
    ラスタ形式は、普段使っている、jpg/png/gifなどがあります。いわゆるピクセルの画像です。
    ベクター形式のファイルの中身は、線の曲がり方、太さ、色などを数値で表すことが出来ます。
    具体的には、イラストレーターで作ったものや、建築などの図面(CAD)などがあります。

    では実際にベクター形式画像(SVG)、webではどこで使われているのか?
    と言いますと、あまり使われてません。
    アップルのホームページのロゴや、ちょっとしたアイコンや
    グラフなどを表示する際に使われたりします。

    では、実際にどんなことができるのか、今回は基本的なことを紹介します。

    <script type="text/javascript" src="./js/raphael-min.js"></script>
    <script type="text/javascript">
    $(function(){
    var paper, test_circle;
    /* paper_01 はdivのid 400は描画の範囲の横幅200は高さ */
    paper = new Raphael( "paper_01", 400, 200 );
    /* 円の描画 円の中心点(200, 100)を50は半径 */
    test_circle = paper.circle( 200, 100, 50 )
    /* 色や線の指定 */
    .attr( { fill : "#459fff", stroke : "none" } );
    });
    </script>
    <div id="paper_01"></div>
    

    円を描くだけなら、簡単です。他にも四角形などの図形も描けます。

    このライブラリにはイベントやアニメーションが用意されています。
    例えば上の図形はマウスを図形の上に乗せるとアニメーションします。
    ちなみに図形はイラストレーターで作ったsvgのパスを使っています。

    今は、モダンブラウザ向け「Snap.svg」という、JavaScriptライブラリをAdobeが作っています。
    このライブラリはRaphaël.jsと同じ作者が開発を行っているようです。
    まだまだ、スマホの動作など、不安な所はありますが、今後の行く末をチラチラ見ていきたいです。

    今回は簡単な概要ですが、次回からは中身の詳しい説明をしたいと思います。

    伊豆七島?下田?真鶴?

    大和市のポテトフライダー、フライドポテトを揚げ続けて120年、変わらぬ味と進化し続ける味を提供しております!休みの日にはポテトダイナマイトを製作し、世界中にバラまいている!