createjs stage event

by Yanan Tian

HTML

<canvas width="400" height="300" id="mineCanvas"></canvas>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

JavaScript

var stage = new createjs.Stage("mineCanvas"),
    canvas = stage.canvas,
    CW = canvas.width,
    CH = canvas.height;
    
stage.enableDOMEvents(true);

var pen, penX, penY,
	c = createjs,
	size = 2,
  color = '#f60';

stage.addChild(pen = new c.Shape());

stage.on('stagemousedown', function(evt){
	size = 10;
  console.log('stagemousedown')
});

stage.on('stagemouseup', function(evt){
	size = 2;
  color = c.Graphics.getHSL(Math.random()*360, 150, 50);
  console.log('stagemouseup')
});

//超出画布之后仍允许监听 stage 的各种事件
stage.mouseMoveOutside = true;

stage.on('stagemousemove', function(evt){
	if(penX){
  	pen.graphics.beginStroke(color)
    	.setStrokeStyle(size, 'round')
      .moveTo(penX, penY)
      .lineTo(evt.stageX, evt.stageY)
      .endStroke();
  	stage.update();
  }
	penX = evt.stageX;
  penY = evt.stageY;
  //永远在边界以内
  console.log("stageX/Y: "+evt.stageX+","+evt.stageY);
  //可以超出边界，小于 0 或 大于 canvas 的宽高（CW/CH）
  console.log("rawX/Y: "+evt.rawX+","+evt.rawY);
});

//除了上面的 3 事件外，stage 还可以监听 click 事件
stage.on('click', function(e){
	console.log('click:'+e.rawX+','+e.rawY);
});