Raphael
概要
Raphaelは, HTML文書内にSVG (Scalable Vector Graphics)を作成するJavascriptライブラリ.簡単な使い方をまとめておく.
簡単な使い方
- 初期化
var raphael = Raphael("div要素のid", width, height);
- text : テキスト
e = raphael.text(x, y, "text\nstring"); e.attr({font-size:"20px", fill:"red"});
- rect : 四角形 (rは角の丸みの半径)
e = raphael.rect(x, y, w, h, r);
- circle : 円
e = raphael.circle(x, y, r);
- path : 直線
e = raphael.path(["M", x, y, "L", x1, y1, x2, y2]); e.attr({stroke:"red", stroke-width:2});
- path : 2次ベジェ曲線直線
e = raphael.path(["M", x, y, "T", x1, y1, x2, y2]); e = raphael.path(["M", x, y, "Q", x1, y1, x2, y2, x3, y3]);
- path : 3次ベジェ曲線直線
e = raphael.path(["M", x, y, "S", x1, y1, x2, y2]); e = raphael.path(["M", x, y, "C", x1, y1, x2, y2, x3, y3]);
- ellipse : 楕円
e = raphael.ellipse(x, y, rx, ry);
- image : 画像
e = raphael.ellipse(src, x, y, w, h);
- オブジェクトの非表示・表示
e.hide(); e.show();
- オブジェクトの移動
e.translate(dx, dy);
- オブジェクトの回転
e.rotate(degree); e.rotate(degree, true); // absolute angle e.rotate(degree, cx, cy); // center
- オブジェクトの拡大・縮小
e.scale(xtimes, ytimes);
e.scale(xtimes, ytimes, cx, cy); // center
- オブジェクトのグループ化
e = raphael.set(); e.push(raphael.rect(x, y, w, h)); e.push(raphael.rect(x, y, h, w)); e.attr({fill:"red"});
- その他
- node
- paper
- remove
- animate
- getBBox
- toFront
- toBack
- insertBefore
- insertAfter
- raphael
- setSize
- setWindow
- getRBG
- getColor
- registerFont
- getFont