如何使用鼠标单击来旋转画布中的文本？

Question

我想知道，一旦我在画布中添加了文本，我如何使用鼠标点击将文本动态旋转到我想要的任何角度？下面是一个示例：

<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度旋转，但我希望将文本旋转到任何所需的角度。

Answer 1

参考下面的代码来动态地旋转画布中的文本

<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>

Answer 2

This library旋转和缩放HTML画布。也许这对你的工作没什么影响。它被称为zoomooz.js