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

我必须做错事，但是当我添加多个时钟对象实例时，setTime（）停止工作。你可以把它包装到html和body标签中，看看我在说什么。这里是代码： `EaselJS没有用一个以上的对象实例更新舞台

 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>

来源

2013-03-08 Jacob

什么是'setTime'？它不是Easel.JS的'Container'类的一部分：http://www.createjs.com/Docs/EaselJS/classes/Container.html – WiredPrairie 2013-03-08 01:37:59

我发布了答案，但下次您请求某人尝试您的代码时，请发布一个完整的html结构，这就像4个额外的行;-) – olsn 2013-03-08 09:31:29

我试图发布完整的代码，但由于某种原因，开放的HTML，脚本和身体标签没有被解析为''内的代码。 ;）感谢你的回答！疯狂的JavaScript原型链.... - – Jacob 2013-03-08 15:38:32

您需要调用的集装箱原型初始化法为好，这样您的时钟头应该是这样的：

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; 
    ...

我测试它，它用你的代码为我工作。

来源

2013-03-08 09:28:09 olsn

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

回答

相关问题