【CreateJS】丸いボタンとクリックイベントを作成するサンプル

2018年3月1日2019年6月12日CreateJS,JavaScriptライブラリ,JavaScript

「CreateJS」で丸いボタンを作成してクリックイベントを作成するサンプルコードです

背景のみにクリック可能にすると文字部分はクリック出来ません背景と文字をContainerを利用してグループ化する事で全体をクリック可能になります

See the Pen CreateJS circle button by yochans (@yochans) on CodePen.

丸いボタンを作成するサンプルコード

HTML

<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<title>CreateJSサンプルコード</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="main" width="500" height="300"></canvas>
</body></html>

main.js

function init() {
        //canvas id mainをstageに設定
        let stage = new createjs.Stage("main");

        //背景にする図形を作成
        let bg = new createjs.Shape();
        //背景にする四角形の色と位置・サイズを指定
        bg.graphics.beginFill("black").drawRect(0, 0, 500, 300);
        //背景にする四角形をstageに追加
        stage.addChild(bg);

        //ボタンのコンテナを作成
        newbtn = new createjs.Container();
  
        //ボタンの背景を作成してコンテナの子要素に
        let btnBg = new createjs.Shape();
        btnBg.graphics.beginFill("#E65100");
        btnBg.graphics.drawCircle(0, 0, 50);
        newbtn.addChild(btnBg);
  
        //ボタンのテキストを作成してコンテナの子要素に
        let btnText = new createjs.Text("CLICK ME", "bold 1em sans-serif", "#FFF");
        btnText.textAlign = "center";
        btnText.textBaseline = "middle";
        newbtn.addChild(btnText);

        //ボタンのコンテナをstageの子要素にして位置調整
        stage.addChild(newbtn);
        newbtn.x = 250;
        newbtn.y = 150;

        //ボタンのコンテナにクリックイベントを定義
        newbtn.addEventListener("click",btnClick,true);//第2引数に実行する関数名

        //クリックイベント
        function btnClick(){
          btnText.text = String("OK");//テキストを変更
          stage.update();//tickを使ってないのでここで
        }//stageを更新
        stage.update();
}
init();