2012-08-30 144 views
2

我想知道一旦我在畫布中添加文本我怎樣才能使用鼠標點擊旋轉文本到任何我喜歡的動態角度?這裏有一個例子:如何使用鼠標點擊在畫布上旋轉文本?

<html> 
<head> 
<style> 
    body { margin: 0px; padding: 0px; } 
    canvas { border: 1px solid #9C9898; } 
</style> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.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 text = new Kinetic.Text({ 
     x:225, 
     y: 80, 
     text: "Simple", 
     fontSize: 30, 
     fontFamily: "Calibri", 
     textFill: "black" 
    });   
    text.on("click", function(){ 
     angle+=1 
     text.transitionTo({ 
      rotation:Math.PI*angle/2, 
      duration:1 

     }); 
    }); 
    layer.add(text); 
    stage.add(layer); 
    } 
</script> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html> 

這裏使用鼠標點擊,它會在每一次我點擊鼠標45度的旋轉,但我想旋轉文本到任意角度。

回答

0

請參考下面這個代碼的文本在畫布旋轉動態

<html> 

<head> 
<style> 
    body { margin: 0px; padding: 0px; } 
    canvas { border: 1px solid #9C9898; } 
</style> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.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 text = new Kinetic.Text({ 
     x:225, 
     y: 80, 
     text: "Simple", 
     fontSize: 30, 
     fontFamily: "Calibri", 
     textFill: "black" 
    });   
    text.on("click", function(){ 
     angle=getRandomInt(1,4); 
     text.transitionTo({ 
     rotation:Math.PI*angle/2, 
     duration:1 

     }); 
    }); 
    layer.add(text); 
    stage.add(layer); 
    } 
    function getRandomInt (min, max) { 
     return Math.random() * (max - min + 1); 
    } 

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

它正在不同的方向旋轉。我希望它順時針方向旋轉 – Anish

0

This library旋轉和放大HTML畫布。也許這對你的工作是好的。這就是所謂的zoomooz.js

相關問題