createjs event hitArea

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.enableMouseOver(30);

var ccs, cc, container, hit,
	ccLen = 20;

stage.addChild(container = new createjs.Container());

hit = new createjs.Shape();
hit.set({x: Math.random()*(CW-20), y: Math.random()*(CH-20)})
  .graphics
  .f('red')
  .dc(0,0,55);
hit.alpha = .3;
hit.name = 'hit';
stage.addChild(hit)

for(var i=0; i<ccLen; i++){
	container.addChild(cc = new createjs.Shape())
  	.set({x: Math.random()*(CW-20), y: Math.random()*(CH-20)})
    .graphics
    .f('blue')
    .dc(0,0,20);
  cc.alpha = .3;
}

//设置红色的hit为蓝色小球的hitArea
container.hitArea = hit;

createjs.Ticker.on('tick', stage);

container.on('mouseover', handleContInteraction);
container.on('mouseout', handleContInteraction);

function handleContInteraction(evt){
  for(var i=0,l=container.getNumChildren();i<l;i++){
    cc = container.getChildAt(i);
    cc.alpha = (evt.type == 'mouseover')? 1 : .3;
  }
}