第 8 章 DOM 67
10.2 形状の描画
86 第10章 Rapha¨el 10.1.7 集合オブジェクト
Rapha¨elでは、形状のグループを作りたいときは、「集合オブジェクト」(set object)と呼ばれ るオブジェクトを使います。
集合オブジェクトは、キャンバスオブジェクトが持っているsetというメソッドを呼び出すこ とによって作ることができます。そして、集合オブジェクトに形状を追加したいときは、その集 合オブジェクトが持っているpushというメソッドを呼び出して、追加したい形状を引数として 渡します。引数は、何個でも好きなだけ渡すことができます。
集合オブジェクトも、SVGの要素をあらわすオブジェクトと同じように、attrというメソッ ドを持っています。このメソッドを使うことによって、集合オブジェクトを構成しているすべて の形状の属性に対して、同じ属性値を設定することができます。
HTML文書の例 set.html
<!DOCTYPE html>
<html>
<head><title>set</title></head>
<body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var paper = Raphael(0, 0, 400, 300);
var st = paper.set();
st.push(
paper.ellipse(160, 100, 140, 80).attr({ fill: "coral" }), paper.ellipse(240, 200, 140, 80).attr({ fill: "khaki" }) ).attr({
"stroke-width": 10, stroke: "crimson", });</script>
</body>
</html>
10.2. 形状の描画 87 paper.rect(20, 20, 280, 230).attr({ fill: "skyblue" });
paper.rect(100, 50, 280, 230, 40).attr({ fill: "navy" });
</script>
</body>
</html>
10.2.3 円
円は、circleというメソッドを呼び出すことによって描画することができます。このメソッ
ドは、次の3個の引数を受け取ります。
1個目 中心のx座標。
2個目 中心のy座標。
3個目 半径。
HTML文書の例 circle.html
<!DOCTYPE html>
<html>
<head><title>circle</title></head>
<body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var paper = Raphael(0, 0, 400, 300);
paper.circle(200, 150, 140).attr({ fill: "lawngreen" });
</script>
</body>
</html>
10.2.4 パス
パスは、pathというメソッドを呼び出すことによって描画することができます。このメソッ ドは、引数としてパスデータを受け取ります。パスデータの書き方は、SVGと同じです。
Rapha¨elは、line、polyline、polygonというメソッドを定義していません。ですから、
Rapha¨elで直線を描画したいときは、pathメソッドを使うことになります。
破線を作るためのstroke-dasharrayという属性に設定する値は、SVGとRapha¨elとで書き 方が違いますので、注意が必要です。Rapha¨elでは、マイナス(-)とドット(.)という2種類 の文字を並べた文字列で破線の形状を指定します。たとえば、-..という文字列を設定すること によって、二点鎖線を作ることができます。
HTML文書の例 path.html
<!DOCTYPE html>
<html>
<head><title>path</title></head>
<body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var data = "l80,0 a80,60 0 1,1 100,0 l80,0";
var paper = Raphael(0, 0, 400, 300);
paper.path("M50,150" + data).attr({
"stroke-width": 30, stroke: "slateblue",
"stroke-linecap": "round",
"stroke-linejoin": "round"
});
paper.path("M50,280" + data).attr({
"stroke-width": 5, stroke: "indigo",
"stroke-dasharray": "-.."
});
</script>
</body>
</html>
88 第10章 Rapha¨el path要素のオブジェクトを生成したのちに、その要素が持っているパスデータを変更する、
ということも可能です。パスデータを変更したいときは、path要素のオブジェクトが持ってい るpathという属性に対して新しいパスデータを設定します。
引数を何も渡さないでpathを呼び出すと、空のパスを描画するpath要素が生成されます。
HTML文書の例 pathbyattr.html
<!DOCTYPE html>
<html>
<head><title>path by attribute</title></head>
<body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var data = "M50,60 l120,30 a100,100 0 1,1 0,120 l-120,30 Z";
var paper = Raphael(0, 0, 400, 300);
paper.path().attr({
path: data,
fill: "forestgreen"
});
</script>
</body>
</html>
10.2.5 テキスト
テキストは、textというメソッドを呼び出すことによって描画することができます。このメ ソッドは、次の3個の引数を受け取ります。
1個目 テキストの左端のx座標。
2個目 テキストのベースラインのy座標。
3個目 描画するテキスト。
HTML文書の例 text.html
<!DOCTYPE html>
<html>
<head><title>text</title></head>
<body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var paper = Raphael(0, 0, 400, 300);
paper.set().push(
paper.text(200, 70, "serif")
.attr({ "font-family": "serif" }), paper.text(200, 120, "sans-serif")
.attr({ "font-family": "sans-serif" }), paper.text(200, 170, "serif italic").attr({
"font-family": "serif",
"font-style": "italic"
}),paper.text(200, 220, "serif bold").attr({
"font-family": "serif",
"font-weight": "bold"
}),paper.text(200, 270, "serif italic bold").attr({
"font-family": "serif",
"font-style": "italic",
"font-weight": "bold"
).attr({})
fill: "chocolate",
"font-size": 50,
"text-anchor": "middle"
});</script>
</body>
</html>