Comment faire pivoter le texte dans le canevas en utilisant la méthode jquery cinétique

Question

Je souhaite faire pivoter le texte de 360 ​​degrés en cliquant sur la souris. S'il vous plaît voir l'image ci-dessous pour plus de détails.

Comme vous pouvez le voir le texte « ddddd » dans l'image, je veux tourner ce texte par le clic de la souris. Voici mon 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  
} 

Maintenant, cet événement a lieu lorsque le bouton « ADDTEXT » est cliquez qui est vu dans l'image.

Answer 1

Vous pouvez utiliser la fonction rotate. Voici demo qui utilise KonvaJs mais le concept est le même. Si possible, commencez par utiliser KonvaJS. C'est une version améliorée de KineticJs et bien entretenue.

<!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>