2016.11.22

CreateJSを使って動きのあるWEBページを作りたい！　～クリック処理～

最近のWEBページってたくさん動きますよね！
イケてるサイトとか見ると自分もそんなサイトを作ってみたい…
そんなことを思う今日この頃です(￣∇￣*)
そこで今回は、ローディング画面のようなちょっとした動きを手軽に作れるCreateJSを学んでいきます。

CreateJSを使って動きのあるWEBページを作りたい！　～図形の描画～
CreateJSを使って動きのあるWEBページを作りたい！　～クリック処理～
CreateJSを使って動きのあるWEBページを作りたい！　～Tickerで動かす～
CreateJSを使って動きのあるWEBページを作りたい！　～Containerでまとめる～

CreateJSでクリック処理

今回は描画されている図形をクリックされたときに更新してみます。
前回作成した顔のような図形を変化させていきます。
そのため、CreateJSの読み込みとキャンバスについては準備してあるのでそのまま利用してください。

CreateJSでクリック時に図形を変更

CreateJSでクリックイベントにより図形を変更する基本的な流れは以下になります。

クリックされるshapeへイベントリスナーを追加
イベントに渡したメソッドを定義
メソッド内で変更する図形を削除
メソッド内でシェイプを定義
メソッド内でステージへシェイプを追加
メソッド内で再描画

になります。
重要なところはイベント発火後にもう一度描画を行うところです。
一つずつ実装を見ていきます。

1. クリックされるshapeへイベントリスナーを追加

シェイプにクリックイベントを付与する際は下記の構文で付与することができます。。

シェイプ.addEventListener(“click”, メソッド名);

“click”の部分を”mousedown”などに変えると別のイベントを定義することができます。

2. イベントに渡したを定義

1で渡したメソッド名でメソッドを作成します。
特別なものではなくJavaScriptのメソッド定義です。
引数にイベント情報が渡されます。

function メソッド名(event){};

3. メソッド内で変更する図形を削除

2で作ったメソッドに2ですでに描画されている図形を削除していきます。

ステージ.removeChild(シェイプ);

4. メソッド内でシェイプを定義

新しくシェイプを作成します。
前回と同じです。

new createjs.Shape();

今回は、円の一部を描画するので、以下の文を使います。

シェイプ..graphics.arc(x位置, y位置, 半径, 開始ラジアン, 終了ラジアン);

5. メソッド内でステージへシェイプを追加

ステージにシェイプを追加します。

ステージ.addChild(“シェイプ”);

6. メソッド内で再描画

変更が終わったところでステージのアップデートをします。
これにより再描画され変更が反映されます。

実際のコード

上記の構文を使用し、実際に出来上がったコードは以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.onload = function () {
      var lineSize = 1;
    
      var faceSize = 50;
      var faceX = 100;
      var faceY = 100;

      var eyeSize = 6;
      var eyeY = faceY - (faceSize / 4);
      var leftEyeX = faceX + (faceSize / 4);
      var rightEyeX = faceX - (faceSize / 4);
    
      var mouthY = faceY + (faceSize / 4);
      var mouthX = faceX;

      var rectMouthSizeX = 30;
      var rectMouthSizeY = 10;
      
      var arcMouthSize = 5;
    
      // createJSのステージを作成
      var stage = new createjs.Stage("canvas");

      // 顔を定義
      var face = new createjs.Shape();                             // シェイプを新規作成
      face.graphics.beginStroke("Black");                          // 線の色
      face.graphics.setStrokeStyle(lineSize);                      // 線の太さ
      face.graphics.beginFill("Yellow");                           // 塗りつぶし色
      face.graphics.drawCircle(faceX, faceY, faceSize);            // 円をX位置, Y位置, 半径で作成

      // 左目を定義
      var leftEye = new createjs.Shape();                          // シェイプを新規作成
      leftEye.graphics.beginStroke("Black");                       // 線の色
      leftEye.graphics.setStrokeStyle(lineSize);                   // 線の太さ
      leftEye.graphics.beginFill("White");                         // 塗りつぶし色
      leftEye.graphics.drawCircle(leftEyeX, eyeY, eyeSize);        // 円をX位置, Y位置, 半径で作成

      // 右目を定義
      var rightEye = new createjs.Shape();                         // シェイプを新規作成
      rightEye.graphics.beginStroke("Black");                      // 線の色
      rightEye.graphics.setStrokeStyle(1);                         // 線の太さ
      rightEye.graphics.beginFill("White");                        // 塗りつぶし色
      rightEye.graphics.drawCircle(rightEyeX, eyeY, eyeSize);      // 円をX位置, Y位置, 半径で作成

      // 口を定義
      var mouth = new createjs.Shape();                            // シェイプを新規作成
      mouth.graphics.beginStroke("Black");                         // 線の色
      mouth.graphics.setStrokeStyle(1);                            // 線の太さ
      mouth.graphics.beginFill("Red");                             // 塗りつぶし色
      mouth.graphics.rect(mouthX - (rectMouthSizeX / 2),           // 四角をX位置, Y位置, 大きさで作成
                          mouthY,
                          rectMouthSizeX,
                          rectMouthSizeY);

      // イベントの追加
      face.addEventListener("click", clickMouth);

      // ステージに追加
      stage.addChild(face);                                        // 顔をステージに追加
      stage.addChild(leftEye);                                     // 左目をステージに追加
      stage.addChild(rightEye);                                    // 右目をステージに追加
      stage.addChild(mouth);                                       // 口をステージに追加

      // 描画
      stage.update();

      function clickMouth(event) {
        // ステージから削除
        stage.removeChild(mouth);

        // 口を再定義
        mouth = new createjs.Shape();                              // シェイプを新規作成
        mouth.graphics.beginStroke("Black");                       // 色
        mouth.graphics.arc(mouthX,                                 // 円をX位置, Y位置, 半径, 開始ラジアン, 終了ラジアンで作成
                           mouthY,
                           arcMouthSize,
                           Math.PI / 6, Math.PI / 6 * 5);

        // ステージに追加
        stage.addChild(mouth);

        // 再描画
        stage.update();
      }
    };
  </script>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

イベントのメソッドの中で「stage.update()」を再度実行しています。
再描画した際は必ず実行する必要があります。