CreateJS test

by hajime_nagahata

HTML

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<canvas id="myCanvas" width="640" height="320"></canvas>

JavaScript

var state = {};

function init() {
  // Stageオブジェクトを作成します
  var stage = new createjs.Stage("myCanvas");

  // 円を作成します
  var shape = new createjs.Shape();
  shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
  shape.graphics.drawCircle(0, 0, 100); //半径 100px の円を描画
  shape.x = 200; // X 座標 200px の位置に配置
  shape.y = 200; // Y 座標 200px の位置に配置
  stage.addChild(shape); // 表示リストに追加
  
  

  // Stageの描画を更新します
  stage.update();

  // インタラクティブの設定
  shape.addEventListener("mousedown", handleDown);
  shape.addEventListener("pressmove", handleMove);
  
  state.dragPointX = 0;
  state.dragPointY = 0;

  // 表示オブジェクトを押したときの処理です
  function handleDown(event) {
    // ドラッグを開始した座標を覚えておく
    state.dragPointX = stage.mouseX - event.target.x;
    state.dragPointY = stage.mouseY - event.target.y;
  }

  // 表示オブジェクトを押した状態で動かしたときの処理です
  function handleMove(event) {
    // 表示オブジェクトはマウス座標に追随する
    // ただしドラッグ開始地点との補正をいれておく
    event.target.x = stage.mouseX - state.dragPointX;
    event.target.y = stage.mouseY - state.dragPointY;
	  stage.update();

		console.log(shape.y);
  }
}

init();