はじめてのRaphael (2) : イベント編

HTML

<!-- #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 -->

CSS

body {
        margin:0;
        font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',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;
}

JavaScript

// 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.click( function(){
        console.log( this.type ); // => "circle"
        alert( "さわんな！" );
    });
    
    myRect.drag(
        /**
         * マウスムーブ時の処理
         */
        function( dx, dy, x, y, e ){
            /**
             * Element.data() で初期の座標を取り出して
             * dx, dyを加算して移動
             */
           ...