キネティックjqueryメソッドを使用してキャンバス内のテキストを回転させる方法

Question

マウスクリックで360度回転したいと思います。詳細は下の画像をご覧ください。

あなたは、画像内のテキスト「DDDDD」を見ることができるように、私は、マウスのクリックごとにこのテキストを回転したいです。ここに私のコードは、「addtext」ボタンを画像に見られるクリックとき今、このイベントが発生した、

//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  
} 

です。

Answer 1

rotate機能を使用できます。ここではKonvaJsを使用するdemoですが、コンセプトは同じです。可能であれば、KonvaJSを使用して開始してください。それはKineticJsのアップグレードされたバージョンであり、よく管理されています。

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