お仕事

• 株式会社ヌーラボ所属
• Backlogインフラ、開発、サポート
• Cacooインフラ

コミュニティ

• JAWS-UG 京都支部
• 関西Javaエンジニアの会
• FxUG 京都

Raphaël.js とは

• raphaeljs.com
• ベクター画像を扱うためのライブラリ
• MITライセンス
• 最新版 2.1.0 (2008年頃からGitHubに存在)
• Sencha Labsの一つ

サンプル

特徴

• SVGでレンダリング
• クロスブラウザ対応
• Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+
• Internet Explorer 6.0+

類似品

• jQuery SVG
• SVG Web

何に使ったか

Backlog の Git 機能のネットワーク図

サルGitもよろしく!

入門ドキュメントも作りました

ePub版も公開してます！

コード - 描画する

領域の真ん中に白抜きの円を描く

var r = Raphael('demo1',360,360);
var circle = r.circle(180, 180, 20).attr({
  "fill": "#fff",
  "stroke":"#f00",
  "stroke-width":3
});
					

デモ - 描画する

コード - イベントる

ホバーした時に色変える

circle.hover(function(){
  this.attr("fill","#f00");
}, function(){
  this.attr("fill","#fff");
});
					

デモ - イベントる

コード - アニメる

クリックしたら移動する

circle.click(function(){
  this.animate({transform:'T-140,0', fill:'#fff'},200,'linear');
});
					

デモ - アニメる