2

クリックを使用してキャンバス内のテキストを任意の角度で回転させるのが好きですが、ここではテキストが時計回りと反時計回りに回転しています。時計回りに好きな角度に回転させたいです。

コード：

    <html>
    <head>
    <style>
   body { margin: 0px; padding: 0px; }
   canvas { border: 1px solid #9C9898; }
    </style>
   <script src="http://www.html5canvastutorials.com/libraries/kinetic-0.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",
       draggable: true

     });         
       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)) + min;
     }

      </script>
      </head>
      <body>
      <div id="container"></div>
      </body>
      </html>
4

1 に答える 1

2

あなたはランダムな角度を得ています。

マウスの位置を取得してから、マウス座標とテキスト位置の間の角度を計算する必要があります

それが役立つかどうかを確認してください：

<html>
    <head>
        <style>
            body { margin: 0px; padding: 0px; }
            canvas { border: 1px solid #9C9898; }
        </style>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.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 rect = new Kinetic.Rect({x:0,y:0, width:stage.getWidth(), height:stage.getHeight()});

                var text = new Kinetic.Text({
                    x:225,
                    y: 80,
                    text: "Simple",
                    fontSize: 30,
                    fontFamily: "Calibri",
                    textFill: "black",
                    draggable: true
                });         

                rect.on("click", function(){
                    var mousePos = stage.getMousePosition(); /*gets the mouse position*/
                    angle = getAngle(text.getX(), text.getY(), mousePos.x, mousePos.y);
                    text.transitionTo({
                        rotation: angle,
                        duration: 1
                    });
                });

                layer.add(rect);
                layer.add(text);
                stage.add(layer);
            }

            function getAngle (cx, cy, px, py) { /*calculate the angle between two points*/
                var x = cx - px;
                var y = cy - py;
                return Math.atan2(-y, -x);
            }
        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>
于 2012-08-31T19:31:57.810 に答える