2

我喜欢使用 click 以任何所需的角度旋转画布中的文本，但这里的文本是顺时针和 anticloclwise 旋转的。我喜欢顺时针旋转它到我想要的角度。

代码：

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