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});
e = raphael.path(["M", x, y, "T", x1, y1, x2, y2]);
e = raphael.path(["M", x, y, "Q", x1, y1, x2, y2, x3, y3]);
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
    • print