RaphaëlによるSVGグラフィック (2/5)
作成:2010-04-28 11:40
更新:2010-05-11 16:30
更新:2010-05-11 16:30
■グラフィック描画の基本を覚える
では、さっそくRaphaëlを使ってみましょう。まずは、簡単なグラフィック描画のサンプルを下のリストに掲載しておきます。実際にWebブラウザでアクセスして、グラフィックが表示されるか確認をして見てください。
ここでは、淡いブルーの四角いエリア内に、ピンクとシアンの円が描かれています。リストを見ればわかることですが、テキストの部分はすべてHTMLのタグによるものです。つまり、SVGのグラフィックは、HTMLの表示と融合して描かれることがわかります。では、順に描画の手順を整理していきましょう。
１．キャンバス・オブジェクトの作成
まず最初に行うのは、SVG描画を管理するオブジェクトの作成です。これはRaphaëlでは「キャンバス・オブジェクト（canvas object）」と呼ばれています。Raphael関数を使い、以下のように呼び出して作成します。
２． 図形の作成
では、描画を行いましょう。といっても、SVGはベクターグラフィックですので、「描く」というのとはちょっと違います。「図形を作成する」のです。図形のオブジェクトを作り、それに必要な設定（色とか）をしていくわけですね。
図形の作成ですが、これは先ほどのキャンバス・オブジェクトに用意されているメソッドを呼び出して行います。主な図形作成メソッドを以下に整理しましょう。
・四角形の作成
・正円の作成
・楕円の作成
・線分の作成
３．属性の設定
図形オブジェクトには、さまざまな表示図形に関する属性が用意されています。図形オブジェクトを作成後、メソッドを呼び出してこれらの属性を設定することができます。これは、以下のように行います。
fill――塗りつぶしの色。"red"とか"#FF0000"といったスタイルシートの値で指定。
stroke――線分の色。fillと同様に値を指定。
opacity――透過度。０～１の実数で指定。
stroke-width――線の太さ。数値で指定。
この他にもいろいろとあるんですが、とりあえずこれだけ覚えておけば、簡単な図形作成はできるようになるでしょう。この中で注意しておきたいのは、stroke-widthです。これはマイナス符号を含んでいるので、連想配列のキーとして指定する場合には、"stroke-width"とテキストとして記述する必要があります。
ここでは、淡いブルーの四角いエリア内に、ピンクとシアンの円が描かれています。リストを見ればわかることですが、テキストの部分はすべてHTMLのタグによるものです。つまり、SVGのグラフィックは、HTMLの表示と融合して描かれることがわかります。では、順に描画の手順を整理していきましょう。
１．キャンバス・オブジェクトの作成
まず最初に行うのは、SVG描画を管理するオブジェクトの作成です。これはRaphaëlでは「キャンバス・オブジェクト（canvas object）」と呼ばれています。Raphael関数を使い、以下のように呼び出して作成します。
Raphael( 横位置 , 縦位置 , 横幅 , 縦幅 )これで、描画のエリアが設定されます。以後、描画メソッドを呼び出していきますが、それらは、このエリア内の相対座標として位置や大きさを指定していきます。キャンバス・オブジェクトの作成法はこの他にもいろいろとあるのですが、とりあえずこのやり方だけ覚えておきましょう。
２． 図形の作成
では、描画を行いましょう。といっても、SVGはベクターグラフィックですので、「描く」というのとはちょっと違います。「図形を作成する」のです。図形のオブジェクトを作り、それに必要な設定（色とか）をしていくわけですね。
図形の作成ですが、これは先ほどのキャンバス・オブジェクトに用意されているメソッドを呼び出して行います。主な図形作成メソッドを以下に整理しましょう。
・四角形の作成
キャンバス.rect( 横位置 , 縦位置 , 横幅 , 縦幅 )四角形を描きます。図形の位置と大きさを引数で指定します。
・正円の作成
キャンバス.circle( 横位置 , 縦位置 , 半径 )円は、正円と楕円に分かれています。正円を描く場合は、中心位置と半径の値を引数で指定します。
・楕円の作成
キャンバス.ellipse( 横位置 , 縦位置 , 横の半径 , 縦の半径 )楕円は、中心の位置と、横および縦の半径をそれぞれ指定します。
・線分の作成
キャンバス.path( 線分情報 )線分作成は、pathを使い、作成する線分の情報をテキストとして記述したものを引数に渡します。この線分情報は、SVGで定義されている書き方です。例えば、10,10の位置から50,50の位置に線を描くなら、"M10 10L50 50"と値を指定します。
３．属性の設定
図形オブジェクトには、さまざまな表示図形に関する属性が用意されています。図形オブジェクトを作成後、メソッドを呼び出してこれらの属性を設定することができます。これは、以下のように行います。
図形.attr( { ……設定する属性の値をまとめた連想配列…… } )attrメソッドは、引数に連想配列を渡します。ここで、設定したい属性名と値を用意しておけば、それらがまとめて設定されます。主な属性としては、以下のようなものがあります。fill――塗りつぶしの色。"red"とか"#FF0000"といったスタイルシートの値で指定。
stroke――線分の色。fillと同様に値を指定。
opacity――透過度。０～１の実数で指定。
stroke-width――線の太さ。数値で指定。
この他にもいろいろとあるんですが、とりあえずこれだけ覚えておけば、簡単な図形作成はできるようになるでしょう。この中で注意しておきたいのは、stroke-widthです。これはマイナス符号を含んでいるので、連想配列のキーとして指定する場合には、"stroke-width"とテキストとして記述する必要があります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Sample Page</title>
<script type="text/javascript"
src="raphael-min.js"></script>
<script type="text/javascript">
<!--
function init(){
var paper = Raphael(50, 35, 200, 200);
var r = paper.rect(0,0,200,200);
r.attr({fill:"#99F",stroke:"#99F",opacity:0.25});
var c1 = paper.circle(50,50,100);
c1.attr({fill:"#F99",stroke:"#F99",opacity:0.5});
var c2 = paper.circle(125,125,50);
c2.attr({fill:"#9F9",stroke:"#F9F","stroke-width":10,opacity:0.5});
}
//-->
</script>
</head>
<body onload="init();">
<h1>サンプル</h1>
<div>これは、RaphaelによるSVGグラフィックの例です。</div>
</body>
</html>
※関連コンテンツ