transitionTo kineticJs不能用於單擊事件的方法

我正在使用kineticJS的transitionTo方法在鼠標的單擊事件中顯示形狀的動畫旋轉。如果我們第一次點擊形狀，但隨後的點擊不會旋轉形狀，它會正常工作。我想每次點擊它時都會以某個角度顯示形狀的過渡（旋轉）。請讓我知道我正在犯的錯誤，我該如何糾正？transitionTo kineticJs不能用於單擊事件的方法

這是我使用

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script> 
    <script> 
     window.onload = function() { 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 578, 
      height: 200 
     }); 

     var layer = new Kinetic.Layer({ 
     x:stage.getWidth()/3 , 
      y: stage.getHeight()/3 
      }); 

     var rect = new Kinetic.Rect({ 
      x: 239, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: "#00D2FF", 
      stroke: "black", 
      strokeWidth: 4, 
      centerOffset: [50, 100] 
     }); 

     // add the shape to the layer 
     layer.add(rect); 

     // add the layer to the stage 
     stage.add(layer); 


     rect.on("click", function() { 

      rect.transitionTo({ 
      rotation:2*Math.PI, 
      duration:1 
      }); 
      stage.draw(); 
     }); 
     }; 

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

來源

2012-07-05 user1502901

試試這個代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script> 
    <script> 
     window.onload = function() { 
     var angle = 0; 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 578, 
      height: 200 
     }); 

     var layer = new Kinetic.Layer(); 

     var rect = new Kinetic.Rect({ 
      x: 239, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: "#00D2FF", 
      stroke: "black", 
      strokeWidth: 4 
     }); 

     layer.add(rect); 

     stage.add(layer); 

     rect.on("click", function() { 

      angle += 2; 

      rect.transitionTo({ 
      rotation: Math.PI * angle, 
      duration:1 
      }); 
     }); 

     }; 

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

的點擊已經工作得很好，但是你告訴它每一次旋轉相同的天使（爲什麼它只在第一次點擊時產生動畫效果）。我添加了一個變量，以便每次點擊它時角度增加360度。

來源

2012-07-05 19:59:23 eivers88

transitionTo kineticJs不能用於單擊事件的方法

回答

相關問題