tick&draw

Stage

tick入口方法

每次tick更新Stage.prototype.update()方法

let stage = new createjs.Stage("canvasElementId");
let image = new createjs.Bitmap("imagePath.png");
stage.addChild(image);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
   image.x += 10;
   stage.update();
}

Stage源码分析

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

    // 执行tick方法
    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) {
        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();
    }
    // 本身没有updateContext方法，执行父类Container的父类DisplayObject的updateContext方法
    this.updateContext(ctx);
    // 执行父类Container的draw方法
    this.draw(ctx, false);
    ctx.restore();
    this.dispatchEvent("drawend");
};

// 在display list当中自动调用，除非TickOnUpdate设置为false，否则`update`方法将自动调用此函数。

// 如果将props对象传递给tick（），则它的所有属性都将复制到传播到侦听器的事件对象。

// easeljs中的一些基于时间的特性（例如sprite/framerate）要求将tick事件对象（或具有delta属性的等效对象）作为props参数传递给tick（）

p.tick = function(props) {
  if (!this.tickEnabled || this.dispatchEvent("tickstart", false, true) === false) { return; }
  var evtObj = new createjs.Event("tick");
  if (props) {
    for (var n in props) {
      if (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }
    }
  }

  // 注意，Stage自身无_tick方法，这里会调用父类Container的_tick方法。
  this._tick(evtObj);
  this.dispatchEvent("tickend");
};

Container

p.draw = function(ctx, ignoreCache) {
    if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }

    // this ensures we don't have issues with display list changes that occur during a draw:
    var list = this.children.slice(); // 复制this.children数组
    // 这里为什么只循环Container中的一层子元素，因为整个Stage就是多个Container互相包裹而成，就是Stage->Container->Container->Shape等
    for (var i=0,l=list.length; i<l; i++) {
        var child = list[i];
        if (!child.isVisible()) { continue; }

        // draw the child:
        ctx.save();
      
        child.updateContext(ctx);
        // 遍历子元素，调用子元素的draw方法，子元素如果是Shape或Bitmap，则调用它们自身的draw方法
        child.draw(ctx);
        ctx.restore();
    }
    return true;
};

// evtObj事件对象在所有的tick事件中都会触发，evtObj对象在dispatchers中重复使用，以减少构造和垃圾回收的花费。
// 此方法在Stage的tick方法中被调用
p._tick = function(evtObj) {
    if (this.tickChildren) {
        for (var i=this.children.length-1; i>=0; i--) {
            var child = this.children[i];
            if (child.tickEnabled && child._tick) { child._tick(evtObj); }
        }
    }
    this.DisplayObject__tick(evtObj);
};