すぐるホームページ > きしも.com > raphaelのまとめ

raphaelのまとめ

raphaelは,Webページ上で線や円などのベクトル図形を表示するための言語です。
JavascriptによるSVG描画 - Raphael(入門編)で勉強させてもらったraphaelの内容を,自分に都合良くまとめました。
Raphael(ラファエル)は,クロスブラウザに対応した,ウェブサイト上でのベクタ形式画像描画用Javascriptライブラリです。
多くのブラウザの場合SVGが,IEの旧版の場合はVMLが描画されます。

ダウンロード
http://raphaeljs.com/

テンプレート1(div要素に描画する場合)
<script type="text/javascript" src="raphael-min.js"></script>

<div id="tag"></div>

<script type="text/javascript">
    //描画領域の設定。引数は,タグID名,幅,高さ
    var paper = Raphael("tag", 800, 200);

    //例として,円を描画。中心のxy座標,半径
    var en = paper.circle(100, 100, 50)
    //属性変更
    en.attr( 'fill', '#888888'); //塗りつぶし
    en.attr( 'stroke', '#ff0000'); //枠線の色
    en.attr( 'stroke-width', 4); //枠線の太さ

</script>

テンプレート2(body要素に直接描画する場合)
<script type="text/javascript" src="raphael-min.js"></script>

<script type="text/javascript">
    //描画領域の設定。引数は,x, y, 幅,高さ
    var paper = Raphael(0, 0, "100%", "100%");

    //例として,円を描画。中心のxy座標,半径
    var en = paper.circle(100, 100, 50)
    //属性変更
    en.attr( 'fill', '#888888'); //塗りつぶし
    en.attr( 'stroke', '#ff0000'); //枠線の色
    en.attr( 'stroke-width', 4); //枠線の太さ

</script>

図形
図形命令
四角形rect(x, y, width, height)
circle(x, y, r)
楕円ellipse(x, y, rx, ry)
直線(パス)path("操作内容")
画像image(src, x, y, width,height)
文字列text(x, y, text)

直線(パス)の操作内容
操作命令
移動M x, y
直線L x1, y1 x2, y2 ……Z(パスを閉じる)
二次ベジェ曲線Q 制御点 頂点 制御点 頂点……
 〃 (制御点は前の曲線から自動計算)T 頂点 頂点……
円弧A 半径r1, r2 回転角 短弧0か長弧1 反時計回り0か時計回り1 終点x, y

属性
属性名命令
塗りつぶしの色fill
塗りつぶしの不透明度fill-opacity
線の色stroke
破線の設定stroke-dasharray
線の不透明度fill-opacity
線の太さstroke-width
フォントの設定font
フォントの大きさfont-size
フォントの太さfont-weight
カーソル指定cursor
図形リンク先href
図形タイトルtitle

きしも.com