// 1. シンプルな例(クリックイベント) (function(){ var paper, myCircle ; /** * 紙に円を描きます。 * myCircleには、Elementオブジェクトが格納されます。 */ paper = new Raphael( "paper-00", 400, 200 ); myCircle = paper.circle( 200, 100, 32 ) .attr( { fill : "#345", stroke : "none" } ); /** * Element.click() で * マウスクリックイベントのハンドラを設定できます。 * ハンドラ内のthisはElementオブジェクトです。 */ myCircle.click( function(){ console.log( this.type ); // => "circle" alert( "さわんな!" ); }); })(); // 2. イベントハンドラの解除 (function(){ var paper, myCircle, onClick ; paper = new Raphael( "paper-01", 400, 200 ); myCircle = paper.circle( 200, 100, 32 ) .attr( { fill : "#345", stroke : "none" } ); onClick = function(){ /** * unclickで解除 */ myCircle.unclick( onClick ); myCircle.attr( "fill", "#999" ); alert( "さわんな!" ); }; /** * click()で登録 */ myCircle.click( onClick ); })(); // 3. hover()でマウスオーバー・アウトを実装 (function(){ var paper, myCircle, onClick ; paper = new Raphael( "paper-02", 400, 200 ); myCircle = paper.circle( 200, 100, 32 ) .attr( { fill : "#345", stroke : "none" } ); myCircle.hover( function(){ console.log( "くんな!" ); this.attr( "fill", "#c00" ); }, function(){ console.log( "にげんな!" ); this.attr( "fill", "#345" ); } ); })(); // 4. drag()で要素のドラッグを実装 (function(){ var paper, myRect; paper = new Raphael( "paper-03", 400, 200 ); myRect = paper.rect( 175, 75, 50, 50 ) .attr( { fill : "#345", stroke : "none" } ); myRect.drag( /** * マウスムーブ時の処理 */ function( dx, dy, x, y, e ){ /** * Element.data() で初期の座標を取り出して * dx, dyを加算して移動 */ this.attr({ x : this.data("x") + dx, y : this.data("y") + dy }); }, /** * ドラッグ開始時の処理 */ function( x, y, e ){ /** * 要素の座標をElement.data()で記録 */ this.data( "x", this.attr("x") ); this.data( "y", this.attr("y") ); this.attr( "fill", "#c00" ); }, /** * ドラッグ終了時の処理 */ function( e ){ this.attr( "fill", "#345" ); } ); })();
<!-- #header --> <div id="header"> <h1>Raphael Demo (events)</h1> </div> <!-- /#header --> <!-- .items --> <div class="items"> <!-- .item --> <div class="item"> <h2>1. シンプルな例(クリックイベント)</h2> <p>クリックすると怒られます。</p> <p class="paper" id="paper-00"></p> </div> <!-- /.item --> <!-- .item --> <div class="item"> <h2>2. イベントハンドラの解除</h2> <p>クリックするとイベントハンドラが解除され、2回目以降は怒られません。</p> <p class="paper" id="paper-01"></p> </div> <!-- /.item --> <!-- .item --> <div class="item"> <h2>3. hover()でマウスオーバー・アウトを実装</h2> <p>マウスオーバーで塗り色を変えるサンプル。</p> <p class="paper" id="paper-02"></p> </div> <!-- /.item --> <!-- .item --> <div class="item"> <h2>4. drag()で要素のドラッグを実装</h2> <p>ドラッグ中に色をかえて要素を移動させるサンプル。</p> <p class="paper" id="paper-03"></p> </div> <!-- /.item --> </div> <!-- /.items -->
body { margin:0; font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; } #header { margin-bottom:3em; } #header h1 { background-color:#234; color:#fff; margin:0; padding:0.5em; font-size:1.5em; } .items { } .item { margin:3em 1em; } .item h2 { font-size:1.3em; } .item .paper { background-color:#eee; width:400px; height:200px; }