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

2018年8月31日JavaScriptCreateJS, 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();

2018年8月31日JavaScriptCreateJS, JavaScriptライブラリ

Posted by Yousuke.U