2012-05-30 3 views
0

ниже код не работает, и я думаю, что это происходит из-за линии:Почему эта переменная выходит за рамки? Javascript

alert(nodes[i].getX()); 

Я думаю, узлы [я] выходит за рамки? Если да, то почему?

(Я прокомментировал большую часть кода, чтобы изолировать проблему. В принципе, код создает 10 кругов, затем 10 кривых, а затем анимирует их на холсте с помощью kineticjs).

Thx!

Код:

<html> 
    <head> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
      } 
      canvas { 
       border: 1px solid #9C9898; 
      } 
     </style> 
     <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script> 
     <script> 
      window.onload = function() { 

       // global parameters 
       var curvatureX = 10; 
       var curvatureY = 10; 
       var nodeRadius = 10; 

       var stage = new Kinetic.Stage({ 
        container: "container", 
        width: 578, 
        height: 300 
       }); 
       var layer = new Kinetic.Layer(); 


       var nodes = []; 

       for (i = 0;i<10;i++){ 
        nodes[i] = new Kinetic.Circle({ 
         x: i*20, 
         y: i*5, 
         z:1, 
         radius: nodeRadius, 
         fill: "blue", 
         stroke: "black", 
         strokeWidth: 4 
        }); 
        layer.add(nodes[i]); 
        alert(nodes[i].getX()); // *** THIS ALERT DOES SHOW UP*** 

       } 


       var edges = []; 
       for (i = 0;i<10;i++){ 

        edges[i]= new Kinetic.Shape({ 
         drawFunc: function() { 
          var context = this.getContext(); 
          context.beginPath(); 

          // ***WHERE THE PROBLEM IS ***  
          alert(nodes[i].getX()); 
          //ALERT DOES NOT SHOW UP + BLANK SCREEN 

//       context.moveTo(nodes[i].getX(), nodes[i].getY()); 
//       if (nodes[i].getY()-nodes[i+1].getY()<0){ 
//        context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()-curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY()); 
//       } 
//       else{ 
//        context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()+curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY()); 
//        
//       } 
          context.lineWidth = 10; 
          // line color 
          context.strokeStyle = "black"; 
          context.stroke(); 
         }, 
         fill: "#00D2FF", 
         stroke: "black", 
         strokeWidth: 4 
        }); 
        layer.add(edges[i]); 
       } 



       stage.add(layer); 

       var amplitude_1 = 100; 
       var amplitude_2 = 30; 
       var period = 2000; 
       // in ms 
       var centerX = stage.getWidth()/2; 
       var centerY = stage.getHeight()/2; 

       stage.onFrame(function(frame) { 
        for (i=0;i<nodes.length;i++){ 
         nodes[i].setX(amplitude_1 * i * Math.sin(frame.time * 2 * Math.PI/period) + centerX); 
         nodes[i].setY(amplitude_2 * i+ 20); 
        } 
        layer.draw(); 

       }); 

       stage.start(); 
      }; 

     </script> 
    </head> 
    <body> 
     <div id="container"></div> 
    </body> 
</html> 
+1

Что означает _ «не работает» _ означает? он для старого дерьма или что? – gdoron

+0

страница остается пустой (не отображаются кружки или кривые). – seinecle

+0

Вы пытались отладить код? – gdoron

ответ

0

Это displayed. Используйте панель разработки, чтобы выполнить некоторую отладку.

Смежные вопросы