2012-08-30 111 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

相关问题