TechQA.

How to rotate the text in canvas using kinetic jquery method

342 views Asked by At

I want to rotate text by 360 degree on mouse click. Please see the image below for more detail.

enter image description here

As you can see the text "ddddd" in image, I want to rotate this text as per the mouse click. Here's my code,

//addtext() function is used to add the text to the container.
        $("ul#text #textsubmit").click(function(){
        addText();         
    });

function addText() {
           var text2 =  $('#texts').val();
           var fontfam = $('#fontfam').val();
           var colour = $('#colour').val();
           var textstroke = $('#textstroke').val();
           var width = document.getElementById("textcount").clientWidth;
           var height = document.getElementById("textcount").clientHeight;
           var length = text2.length;
           var rectwidth=width;


    var shapesLayer = new Kinetic.Layer();
        //add group
        var group = new Kinetic.Group({
        draggable: true
        });

      if(font==undefined)
        { var font=30; }

          if(x==undefined)
           {var x=250;}

         if(y==undefined)
            {var y=55;}

           var complexText = new Kinetic.Text({
              x: x,
              y: y,
              text: text2,
              fontSize: font,
              fontFamily: fontfam,
              textFill: colour,
              textStroke: textstroke
            });

         stage.add(shapesLayer);

         if(rectheight==undefined)
          { var rectheight=50; } 

       if(rectwidth==undefined)
         { var rectwidth=250; } 

        var rectx=250;
        var recty=40;

        var rect = new Kinetic.Rect({ //Rectangle is made as per the name size for increase and descrease size
          x: rectx,
          y: recty,
          width: rectwidth,
          height: rectheight,
          fill: "transparent",
          stroke: "red",
          strokeWidth: 1
        });    

        var recttrx=width+243;
        var recttry=32;
        var recttr= new Kinetic.Rect({ //recttr is used to create the right top corner of the rectangle
          x: recttrx,
          y: recttry,
          width: 15,
          height: 15,
          fill: "blue",
          stroke: "green",
          strokeWidth: 1
        });    

        var rectbrx=width+243;
        var rectbry=82;     
        var rectbr= new Kinetic.Rect({ //rectbr is used to create the right bottom corner of the rectangle
          x: rectbrx,
          y: rectbry,
          width: 15,
          height: 15,
          fill: "yellow",
          stroke: "pink",
          strokeWidth: 1
        });    

        var recttlx=243;
        var recttly=32; 
        var recttl= new Kinetic.Rect({ //recttl is used to create the left top corner of the rectangle
          x: recttlx,
          y: recttly,
          width: 15,
          height: 15,
          fill: "orange",
          stroke: "white",
          strokeWidth: 1
        });  

        var rectblx=243;
        var rectbly=82;     
        var rectbl= new Kinetic.Rect({ //rectbl is used to create the left bottom corner of the rectangle
          x: rectblx,
          y: rectbly,
          width: 15,
          height: 15,
          fill: "black",
          stroke: "red",
          strokeWidth: 1
        })  



rect.on("mouseover dragmove", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "move";
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw();
        writeMessage(messageLayer, "Double Click To Remove Or Edit Text");
})

rect.on("mouseout", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "default";
           recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
            recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
           shapesLayer.draw();
            writeMessage(messageLayer, ""); 
})


   complexText.on("click", function(){
   alert();
   var layer = this.getLayer();
       angle=getRandomInt(1,4);

       text.transitionTo({
         rotation:Math.PI*angle/2,
         duration:1 

       });
       layer.draw();
       });
complexText.on("mouseover dragmove", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "move";
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw();
           writeMessage(messageLayer, "Drag Corners Increse Or Decrease Text Size"); 
})
complexText.on("mouseout", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "default";
           recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
           shapesLayer.draw();
             writeMessage(messageLayer, "");
})
        group.add(complexText);
        group.add(rectbl);      
        group.add(recttr);
        group.add(rectbr);
        group.add(recttl);
        group.add(rect);
        shapesLayer.add(group);
        shapesLayer.draw();

        //bottom right square move start
          rectbr.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          rectbr.moveToTop();
          document.body.style.cursor = "nw-resize";
          rectbr.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          rectbr.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom right square


          //bottom left square move start
          rectbl.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          rectbl.moveToTop();
          document.body.style.cursor = "nw-resize";
          rectbl.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          rectbl.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom left square

          //top left right square move start
          recttl.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          recttl.moveToTop();
          document.body.style.cursor = "nw-resize";
          recttl.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          recttl.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom top left square


                //top right square move start
          recttr.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          recttr.moveToTop();
          document.body.style.cursor = "nw-resize";
          recttr.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          recttr.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end top right square 


          //end square
                rect.on("dblclick", function(){
           //   group.remove(complexText);
 var shapesLayer=this.getLayer();
 group.remove(complexText);
  group.remove(rect);
   group.remove(recttl);
    group.remove(recttr);
     group.remove(rectbl);
      group.remove(rectbr);
 shapesLayer.clear();
   shapesLayer.draw();
   });

   complexText.on("dblclick", function(){
        var shapesLayer=this.getLayer();
        group.remove(complexText);
        group.remove(rect);
          group.remove(recttl);
    group.remove(recttr);
     group.remove(rectbl);
      group.remove(rectbr);
 shapesLayer.clear();
   shapesLayer.draw();
   });
          //start dragging
    group.on("dragend", function() {
            rectbr.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)


       group.on("dragend", function() {
            rectbl.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)

       group.on("dragend", function() {
            recttl.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)   

       group.on("dragend", function() {
            recttr.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)
       //end dragging

      rectbr.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          rectbr.setFill("#black");
            rectbr.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            rectbl.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          rectbl.setFill("#black");
            rectbl.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            recttr.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          recttr.setFill("#black");
            recttr.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            recttl.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          recttl.setFill("#black");
            recttl.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })

    rectbr.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

     rectbl.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

  recttr.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

 recttl.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })           

recttl.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})
recttr.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})

rectbl.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})

rectbr.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})



            //end mouse out of  squares


//end mouse out of  squares

            // add the shapes to the layer
            shapesLayer.add(group);



            // add the shape to the layer

            // add the layer to the stage       
}

Now this event has occur when the "addtext" button is click which is seen in the image.

javascript jquery kineticjs
Original Q&A
1

There are 1 answers

4
Hitesh Kumar On

You can use rotate function. Here's demo which uses KonvaJs but the concept is same. If possible start using KonvaJS. It's upgraded version of KineticJs and well maintained. 

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Rotation Animation Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();
    /*
    * leave center point positioned
    * at the default which is the top left
    * corner of the rectangle
    */
    var blueRect = new Konva.Rect({
        x: 50,
        y: 75,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
    });
    /*
    * move center point to the center
    * of the rectangle with offset
    */
    var yellowRect = new Konva.Rect({
        x: 220,
        y: 75,
        width: 100,
        height: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
            x: 50,
            y: 25
        }
    });
    /*
    * move center point outside of the rectangle
    * with offset
    */
    var redRect = new Konva.Rect({
        x: 400,
        y: 75,
        width: 100,
        height: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
            x: -100,
            y: 0
        }
    });
    layer.add(blueRect);
    layer.add(yellowRect);
    layer.add(redRect);
    stage.add(layer);
    // one revolution per 4 seconds
    var angularSpeed = 90;
    var anim = new Konva.Animation(function(frame) {
        var angleDiff = frame.timeDiff * angularSpeed / 1000;
        blueRect.rotate(angleDiff);
        yellowRect.rotate(angleDiff);
        redRect.rotate(angleDiff);
    }, layer);
    anim.start();
</script>
</body>
</html>

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in KINETICJS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions