Question

我一定做错了，但是当我添加多个时钟对象实例时，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>

Answer 1

您还需要为Container-Prototype调用initialize-method，因此您的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;
    ...

我测试了它，它对我的代码很有用。

EaselJS不使用一个以上的对象实例更新阶段

1 个答案: