對象有沒有方法onFrame

遺憾的恐怕是一個非常愚蠢的問題，但我想學習如何使用KineticJS，我試圖修改教程（http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/），而不是使用一個形狀的靜態圖片。對於它的價值，我試圖動畫格倫貝克頭的PNG，使其旋轉（不倫不類真的）。對象有沒有方法onFrame

我已經通過了一堆錯誤的糊塗，但迄今爲止我一直不讓自己被「遺漏的類型錯誤：對象＃有沒有方法‘onFrame’」

我在這裏上閱讀有關對象/方法的多個問題SO和其他網站，雖然我想我明白是什麼問題，我不知道如何解決它：

object Object has no method

JavaScript object has no method

contains is object has no method?

從我的理解中，「沒有方法」錯誤的意思是可以被稱爲無功能..？當然，「內部框架」存在於Kinetic內部，但是..？我想翻翻動力學文檔，看看他們是否3.8.X（教程）和4.X但儘管他們沒有出現（我使用的庫）之間改了名字。

這是我的代碼：

<head> 
    <script src="http://test.XXXXX.com/js/kinetic-v4.3.2.js"></script> 
    <script> 
     function animate(animatedLayer, beck, frame){ 
      var canvas = animatedLayer.getCanvas(); 
      var context = animatedLayer.getContext(); 

      // update 
      var angularFriction = 0.2; 
      var angularVelocityChange = beck.angularVelocity * frame.timeDiff * (1 - angularFriction)/ 1000; 
      beck.angularVelocity -= angularVelocityChange; 

      if (beck.controlled) { 
       beck.angularVelocity = (beck.rotation - beck.lastRotation) * 1000/frame.timeDiff; 
       beck.lastRotation = beck.rotation; 
      } 
      else { 
       beck.rotate(frame.timeDiff * beck.angularVelocity/1000); 
       beck.lastRotation = beck.rotation; 
      } 

      // draw 
      animatedLayer.draw(); 
     } 

     window.onload = function(){ 
      console.log('stage =', stage); // DEBUG 
      var stage = new Kinetic.Stage({ container: "container", width: 240, height: 320 }); 
      console.log('stage =', stage); // DEBUG 
      var backgroundLayer = new Kinetic.Layer(); 
      var animatedLayer = new Kinetic.Layer(); 


      var beck = new Image(); 
       beck.onload = function() { 

        var beck = new Kinetic.Image({ 
         x: 240, 
         y: stage.getHeight()/2 - 59, 
         image: beckHead, 
         width: 150, 
         height: 230 
        }); 
       beckHead.src = "http://test.XXXXX.com/i/beckhead.png"; 
       animatedLayer.add(beck); 
      }; 



      stage.on("mousedown", function(evt){ 
       this.angularVelocity = 0; 
       this.controlled = true; 
      }); 

      // add listeners to container 
      stage.on("mouseup", function(){ 
       beck.controlled = false; 
      }, false); 

      stage.on("mouseout", function(){ 
       beck.controlled = false; 
      }, false); 

      stage.on("mousemove", function(){ 
       if (beck.controlled) { 

        var mousePos = stage.getMousePosition(); 
        var x = (stage.width/2) - mousePos.x; 
        var y = (stage.height/2) - mousePos.y; 
        beck.rotation = 0.5 * Math.PI + Math.atan(y/x); 

        if (mousePos.x <= stage.width/2) { 
         beck.rotation += Math.PI; 
        } 
       } 
      }, false); 


      stage.add(backgroundLayer); 
      stage.add(animatedLayer); 

      // draw background 
      var context = backgroundLayer.getContext(); 
      context.save(); 
      context.beginPath(); 
      context.moveTo(stage.width/2, stage.height/2); 
      context.lineTo(stage.width/2, stage.height); 
      context.strokeStyle = "#555"; 
      context.lineWidth = 4; 
      context.stroke(); 
      context.restore(); 

      stage.onFrame(function(frame){ 
      console.log("onFrame fired") 
       animate(animatedLayer, beck, frame); 
      }); 


      stage.start(); 
     }; 
    </script> 
</head> 
<body onmousedown="return false;"> 
    <div id="container"><canvas id="container"></canvas> 
    </div> 

</body>

來源

2013-02-08 DRKMTTR

看來這個例子已經更新。我認爲作者聽你的。 – allenhwkim 2013-02-11 03:14:19

哈哈！謝謝您的幫助！：d – DRKMTTR 2013-02-12 09:10:31

這是過時的例子，它使用版本3.8.4

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.8.4.js">

，和目前的版本是> 4.3

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>

當前版本沒有像Stage＃onFrame和Stage＃start這樣的方法。

你可以使用這個例子，http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/作爲你的基礎，然後添加stage.on（「mouseup/down/move/out」）來捕捉鼠標移動並影響動畫。

完美的答案將是老實例轉換到新的版本之一，我可能會在將來嘗試。

來源

2013-02-08 21:05:51 allenhwkim

對象有沒有方法onFrame

回答

相關問題