Stage

autoClear:true

Indicates whether the stage should automatically clear the canvas before each render. You can set this to false to manually control clearing (for generative art, or when pointing multiple stages at the same canvas for example).

var stage = new createjs.Stage("canvasId");
stage.autoClear = false;

p.update = function(props) {
  if (!this.canvas) { return; }
  if (this.tickOnUpdate) { this.tick(props); }
  if (this.dispatchEvent("drawstart", false, true) === false) { return; }
  createjs.DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;
  var r = this.drawRect, ctx = this.canvas.getContext("2d");
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  if (this.autoClear) { // 在render前自动清除canvas
    if (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }
    else { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }
  }

  ctx.save();
  if (this.drawRect) {
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.width, r.height);
    ctx.clip();
  }
  this.updateContext(ctx);
  this.draw(ctx, false);
  ctx.restore();
  this.dispatchEvent("drawend");
};

mouseInBounds: false

指示鼠标当前是否在画布边界bounds内。

mouseMoveOutside: false

如果为true，则当鼠标离开目标画布时，将继续调用鼠标移动事件。See mouseInBounds, and MouseEvent x/y/rawX/rawY.

// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
game.stage.mouseMoveOutside = true

let circle = new createjs.Shape()
circle.graphics.beginFill('red').drawCircle(0, 0, 50)

let label = new createjs.Text('drag me', 'bold 14px Arial', '#FFFFFF')
label.textAlign = 'center'
label.y = -7

let dragger = new createjs.Container()
dragger.x = dragger.y = 100
dragger.addChild(circle, label)
game.stage.addChild(dragger)

dragger.on('pressmove', function (evt) {
  // currentTarget will be the container that the event listener was added to:
  evt.currentTarget.x = evt.stageX
  evt.currentTarget.y = evt.stageY
  // make sure to redraw the stage to show the change:
  game.stage.update()
})

tickOnUpdate: true

如果为true，则在stage上的显示对象渲染之前会调用tick()方法

p.update = function(props) {
  if (!this.canvas) { return; }

  if (this.tickOnUpdate) { this.tick(props); } // 判断执行this.tick

  if (this.dispatchEvent("drawstart", false, true) === false) { return; }
  createjs.DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;

handleEvent

当收到Tick事件时调用阶段更新方法的默认事件处理程序。这允许您直接在ticker上将阶段实例注册为事件侦听器

Ticker.addEventListener("tick", myStage); 
// 直接把Stage当参数放入，会自动执行stage.update()方法

p.handleEvent = function(evt) {
    if (evt.type == "tick") { this.update(evt); }
};

为什么Stage类可以自动调用handleEvent方法呢？原来在EventDispatcher类中

p._dispatchEvent = function(eventObj, eventPhase) {
  var l, arr, listeners = (eventPhase <= 2) ? this._captureListeners : this._listeners;
  if (eventObj && listeners && (arr = listeners[eventObj.type]) && (l=arr.length)) {
    try { eventObj.currentTarget = this; } catch (e) {}
    try { eventObj.eventPhase = eventPhase|0; } catch (e) {}
    eventObj.removed = false;

    arr = arr.slice(); // to avoid issues with items being removed or added during the dispatch
    for (var i=0; i<l && !eventObj.immediatePropagationStopped; i++) {
      var o = arr[i];

      if (o.handleEvent) { o.handleEvent(eventObj); } // 如果有handleEvent方法，则执行
      else { o(eventObj); }
      if (eventObj.removed) {
        this.off(eventObj.type, o, eventPhase==1);
        eventObj.removed = false;
      }
    }
  }
  if (eventPhase === 2) { this._dispatchEvent(eventObj, 2.1); }
};