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

4

2 回答 2

0

这个库旋转和缩放 HTML 画布。也许你的工作没问题。它被称为 zoomooz.js

于 2012-08-30T10:22:42.310 回答
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>
于 2012-08-30T11:01:47.713 回答