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

我想知道，一旦我在画布中添加了文本，我如何使用鼠标点击将文本动态旋转到我喜欢的任何角度？这里有一个例子：

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

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

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

此库旋转并缩放HTML画布。也许这对你的工作来说还可以。它被称为zooooz.js

相关内容

最新更新

热门标签：