EaselJS 没有用一个以上的对象实例更新舞台答案

【问题标题】：EaselJS not updating the stage with one than more object instanceEaselJS 没有用一个以上的对象实例更新舞台
【发布时间】：2013-03-08 17:28:09
【问题描述】：

我一定是做错了什么，但是当我添加多个时钟对象实例时，setTime() 停止工作。你可以把它包装成 html 和 body 标签来看看我在说什么。这是代码： `

        function Clock(){
            this.SIZE=20;
            this.width=this.SIZE*2;
            this.height=this.SIZE*2;
            this.time=null;
            this.hourH=null;
            this.minuteH=null;
            this.initialize();
        }
        Clock.prototype = new createjs.Container(); 

        Clock.prototype.initialize = function () {

              var back = new createjs.Shape();

              var clockColor=createjs.Graphics.getRGB(220, 220, 220);
                var g = back.graphics;
                    g.setStrokeStyle(1);
                    g.beginStroke(createjs.Graphics.getRGB(240, 240, 240));
                    g.beginFill(createjs.Graphics.getRGB(255,255,255));
                    g.drawCircle(this.SIZE, this.SIZE, this.SIZE);
                    g.endStroke();
                    g.beginStroke(createjs.Graphics.getRGB(230, 230, 230));
                    g.drawCircle(this.SIZE, this.SIZE, this.SIZE*0.85);
                this.addChild(back);    
                this.hourH=new createjs.Shape();
                this.minuteH=new createjs.Shape();
                this.addChild(this.hourH);
                this.hourH.x=this.hourH.y=this.minuteH.x=this.minuteH.y=this.SIZE;
                this.addChild(this.minuteH);
                this.hourH.graphics.setStrokeStyle(3, "round", "round");
                this.hourH.graphics.moveTo (0, 0);
                this.hourH.graphics.beginStroke(createjs.Graphics.getRGB("black"));
                this.hourH.graphics.lineTo(0, -this.SIZE*0.6);
                this.hourH.graphics.endStroke();
                this.minuteH.graphics.setStrokeStyle(3, "round", "round");
                this.minuteH.graphics.moveTo (0,0);
                this.minuteH.graphics.beginStroke(createjs.Graphics.getRGB("black"));
                this.minuteH.graphics.lineTo(0, -this.SIZE*0.7);
                this.minuteH.graphics.endStroke();
                this.setTime(3, 45);

        }
            Clock.prototype.setTime=function(hour, minutes){
                this.hourH.rotation=Math.min(hour, 12)/12*360;
                this.minuteH.rotation=Math.min(minutes, 60)/60*360;
            }

        function init(){ 
            createjs.Ticker.setFPS(30); 
            createjs.Ticker.addListener(function() {

            })

            stage = new createjs.Stage("clocks");
            myClock1=new Clock();
            myClock2=new Clock();
            myClock2.x=myClock2.y=50;
            stage.addChild(myClock1);
            stage.addChild(myClock2);
            myClock1.setTime(7,25);
            stage.update();
        }

    </script>
</head>
<body onload="init();">
<div id="canvas_wrap">
    <canvas id="clocks" width="960" height="560"> </canvas>    
</div>

【问题讨论】：

setTime 是什么？它不是 Easel.JS 的 Container 类的一部分：createjs.com/Docs/EaselJS/classes/Container.html
我发布了答案，但是下次你请别人尝试你的代码时，请发布一个完整的 html 结构，就像另外 4 行 ;-)
我试图发布完整的代码，但由于某种原因，开始的 html、脚本和正文标签没有被解析为“”中的代码。 ;）感谢你的回答！疯狂的 javascript 原型链......

标签： easeljs

【解决方案1】：

您还需要为 Container-Prototype 调用初始化方法，因此您的 Clock-header 应如下所示：

function Clock() {
    this.initialize();
}
Clock.prototype = new createjs.Container(); 

// get the original initialize-method
Clock.prototype.container_init = Clock.prototype.initialize;

Clock.prototype.initialize = function () {
    // invoke the original method as the first thing before doing ANYTHING else
    this.container_init();

    // now you can do the other stuff
    this.SIZE=20;
    this.width=this.SIZE*2;
    this.height=this.SIZE*2;
    ...

我测试过了，你的代码对我有用。

【讨论】：