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

This library旋转并缩放HTML画布。也许你的工作还可以。它叫做zoomooz.js

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

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

2 个答案: