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沒有用一個以上的對象實例更新舞臺

回答

相關問題