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 に答える