Stage - bobby169/createjsDoc GitHub Wiki

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()
})

snapToPixelEnabled: false

指示显示对象是否需要全用像素来渲染，您可以将显示对象的DisplayObject/snapToPixel属性设置为false，以便在每个实例上启用/禁用此行为。

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; 

preventSelection: true

如果用户单击并拖动或双击画布，则禁止选择HTML页中的其他元素。这可以通过调用preventDefault（）来处理画布上的任何鼠标向下事件（或触摸等效事件）。

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); }
};