createjs globalToLocal

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;
  var container;
  var r = 30;
  var g_delta = 0;

  stage.addChild((container = new createjs.Container())).set({x: CW / 2, y: CH / 2});

  for (var i = 0, l = 30; i < l; i++) {
    container.addChild((new createjs.Shape()))
      .set({x: Math.random() * CW - CW / 2, y: Math.random() * CH - CH / 2})
      .graphics
      .f(createjs.Graphics.getHSL(Math.random() * 360, 100, 50))
      .dc(0, 0, r);
  }

  createjs.Ticker.setFPS(60);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

  createjs.Ticker.on('tick', function (evt) {
    g_delta = evt.delta / 1000;
    stage.update(evt);
  });

  container.on('tick', function () {
    this.rotation += 180 * g_delta;//每秒选中 180 度

    for (var i = 0, l = this.getNumChildren(), child, lpos; i < l; i++) {
      child = this.getChildAt(i);
      //global to local
      lpos = child.globalToLocal(stage.mouseX, stage.mouseY);
      //hit test
      child.alpha = stage.mouseInBounds && child.hitTest(lpos.x, lpos.y) ? .5 : .1;
    }
  });