如何使用Kineticjs在中心點周圍旋轉圖像？

Question

我已經設法得到某種旋轉，using the code in the jsFiddle，但是如何在中心點周圍旋轉圖像？這是否適合這種類型的旋轉？

我還沒有找到任何好的教程，並且this one didn't help much。引用非常感謝。

---

這是我update函數，它的旋轉，但請參閱rest of the code in the fiddle：

function update(activeAnchor) { 
    var group = activeAnchor.getParent(); 

    var topLeft = group.get('.topLeft')[0]; 
    var topRight = group.get('.topRight')[0]; 
    var bottomRight = group.get('.bottomRight')[0]; 
    var bottomLeft = group.get('.bottomLeft')[0]; 

    var rotateAnchor = group.get('.rotateAnchor')[0]; 
    var image = group.get('Image')[0]; 

    var anchorX = activeAnchor.getX(); 
    var anchorY = activeAnchor.getY(); 
    var imageWidth = image.getWidth(); 
    var imageHeight = image.getHeight(); 

    var offsetX = Math.abs((topLeft.getX() + bottomRight.getX() + 10)/2); 
    var offsetY = Math.abs((topLeft.getY() + bottomRight.getY() + 10)/2); 

    // update anchor positions 
    switch (activeAnchor.getName()) { 
     case 'rotateAnchor': 
      //group.setOffset(offsetX, offsetY); 
      break; 
     case 'topLeft': 
      topRight.setY(anchorY);  
      bottomLeft.setX(anchorX);   
      break;  
     case 'topRight': 
      topLeft.setY(anchorY); 
      bottomRight.setX(anchorX);   
      break;  
     case 'bottomRight':    
      topRight.setX(anchorX); 
      bottomLeft.setY(anchorY);   
      break;   
     case 'bottomLeft': 
      topLeft.setX(anchorX); 
      bottomRight.setY(anchorY);   
      break;   
    } 
    rotateAnchor.setX(topRight.getX() + 5); 
    rotateAnchor.setY(topRight.getY() + 20); 

    image.setPosition((topLeft.getPosition().x + 20), (topLeft.getPosition().y + 20)); 
    var width = topRight.getX() - topLeft.getX() - 30; 
    var height = bottomLeft.getY() - topLeft.getY() - 30; 
    if (width && height) { 
     image.setSize(width, height); 
    } 
} 

Answer 1

 /* 
     * move center point to the center 
     * of the shape with offset 
     * eg: 
     */ 
     var yellowRect = new Kinetic.Rect({ 
      x: 220, //top left cornerX 
      y: 75, //top left cornerY 
      width: 100, 
      height: 50, 
      stroke: 'black', 
      strokeWidth: 4, 
      **offset: [50, 25]** 
     }); 

參考：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/

Answer 2

使用此語法偏移：

var yellowRect = new Kinetic.Rect({ 
     x: 220, //top left cornerX 
     y: 75, //top left cornerY 
     width: 100, 
     height: 50, 
     stroke: 'black', 
     strokeWidth: 4, 
     offset: {x:50, y:25}  // here! 
    }); 

Answer 3

function update(activeAnchor) { 
      var group = activeAnchor.getParent(); 

      var topLeft = group.get('.topLeft')[0]; 
      var topRight = group.get('.topRight')[0]; 
      var bottomRight = group.get('.bottomRight')[0]; 
      var bottomLeft = group.get('.bottomLeft')[0]; 

      var rotateAnchor = group.get('.rotateAnchor')[0]; 
      var image = group.get('Image')[0]; 

      var anchorX = activeAnchor.getX(); 
      var anchorY = activeAnchor.getY(); 
      var imageWidth = image.getWidth(); 
      var imageHeight = image.getHeight(); 

      // update anchor positions 
      switch (activeAnchor.getName()) { 
       case 'rotateAnchor': 

        break; 
       case 'topLeft': 
        topRight.setY(anchorY); 
        bottomLeft.setX(anchorX); 
        break; 
       case 'topRight': 
        topLeft.setY(anchorY); 
        bottomRight.setX(anchorX); 
        break; 
       case 'bottomRight': 
        topRight.setX(anchorX); 
        bottomLeft.setY(anchorY); 
        break; 
       case 'bottomLeft': 
        topLeft.setX(anchorX); 
        bottomRight.setY(anchorY); 
        break; 
      } 

      if (topRight.getX() < topLeft.getX() + minImgSize) { 
       topRight.setX(topLeft.getX() + minImgSize); 
      } 
      if (bottomRight.getX() < topLeft.getX() + minImgSize) { 
       bottomRight.setX(topLeft.getX() + minImgSize); 
      } 
      if (bottomRight.getY() < topLeft.getY() + minImgSize) { 
       bottomRight.setY(topLeft.getY() + minImgSize); 
      } 
      if (bottomLeft.getY() < topLeft.getY() + minImgSize) { 
       bottomLeft.setY(topLeft.getY() + minImgSize); 
      } 

      var width = topRight.getX() - topLeft.getX(); 
      var height = bottomLeft.getY() - topLeft.getY(); 

      image.setPosition({ 
       x: topLeft.getPosition().x, 
       y: (topLeft.getPosition().y) 
      }); 
      image.setWidth(width); 
      image.setHeight(height); 

      rotateAnchor.setX(width/2 + topLeft.getX()); 
      rotateAnchor.setY(height/2 + topLeft.getY()); 

     } 

    function addAnchor(group, x, y, name, dragBound) { 
      var stage = group.getStage(); 
      var layer = group.getLayer(); 
      var groupPos = group.getPosition(); 



      var anchor = new Kinetic.Circle({ 
       x: x, 
       y: y, 
       stroke: '#666', 
       fill: '#ddd', 
       strokeWidth: 2, 
       radius: 6, 
       //name: name, 
       id :"anchor", 
       name:name, 
       draggable: true, 
       dragOnTop: false 
      }); 


      if (dragBound == 'rotate') { 
       startAngle = angle(groupPos.x, groupPos.y, x + groupPos.x, y + groupPos.y); 

       anchor.setAttrs({ 
        dragBoundFunc: function (pos) { 
         return getRotatingAnchorBounds(pos, group); 
        } 
       }); 
      } 


      anchor.on('dragmove', function() { 
       update(this); 
       stage.draw(); 
      }); 
      anchor.on('mousedown touchstart', function() { 
       group.setDraggable(false); 
       this.moveToTop(); 
      }); 
      anchor.on('dragend', function() { 
       group.setDraggable(true); 
       stage.draw(); 
      }); 
      // add hover styling 
      anchor.on('mouseover', function() { 

       var layer = this.getLayer(); 
       document.body.style.cursor = 'pointer'; 
       this.setStrokeWidth(4); 
       stage.draw(); 
      }); 
      anchor.on('mouseout', function() { 
       var layer = this.getLayer(); 
       document.body.style.cursor = 'default'; 
       this.setStrokeWidth(2); 
       stage.draw(); 
      }); 

      group.add(anchor); 


     } 

    function loadImages(sources, callback) { 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 
    for(var src in sources) { 
     numImages++; 
    } 
    for(var src in sources) { 
     images[src] = new Image(); 
     images[src].onload = function() { 
     if(++loadedImages >= numImages) { 
      callback(images); 
     } 
     }; 
     images[src].src = sources[src]; 
    } 
    } 
    function radians(degrees) { 
      return degrees * (Math.PI/180) 
     } 

     function degrees(radians) { 
      return radians * (180/Math.PI) 
     } 

     function angle(cx, cy, px, py) { 
      var x = cx - px; 
      var y = cy - py; 
      return Math.atan2(-y, -x) 
     } 

     function distance(p1x, p1y, p2x, p2y) { 
      return Math.sqrt(Math.pow((p2x - p1x), 2) + Math.pow((p2y - p1y), 2)) 
     } 

     function getRotatingAnchorBounds(pos, group) { 
      var groupPos = group.getPosition(); 
      var rotation = degrees(angle(groupPos.x, groupPos.y, pos.x, pos.y) - startAngle); 
      var dis = distance(groupPos.x, groupPos.y, pos.x, pos.y); 
      console.log('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation + '; distance:' + dis); 
      group.setRotationDeg(rotation); 
      return pos; 
     } 
    function initStage(images) { 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 400 
    }); 
    var darthVaderGroup = new Kinetic.Group({ 
     x: 270, 
     y: 100, 
     draggable: true 
    }); 
    var yodaGroup = new Kinetic.Group({ 
     x: 100, 
     y: 110, 
     draggable: true 
    }); 
    var layer = new Kinetic.Layer(); 

    /* 
    * go ahead and add the groups 
    * to the layer and the layer to the 
    * stage so that the groups have knowledge 
    * of its layer and stage 
    */ 
    layer.add(darthVaderGroup); 
    layer.add(yodaGroup); 
    stage.add(layer); 

    // darth vader 
    var darthVaderImg = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: images.darthVader, 
     width: 200, 
     height: 138, 
     name: 'image' 
    }); 

    darthVaderGroup.add(darthVaderImg); 
    addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none'); 
      addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none'); 
      addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none'); 
      addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none'); 
      addAnchor(darthVaderGroup, darthVaderImg.getWidth()/2, darthVaderImg.getHeight()/2, 'rotateAnchor', 'rotate'); 

    darthVaderGroup.on('dragstart', function() { 
     this.moveToTop(); 
    }); 
    stage.draw(); 
    } 

    var sources = { 
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg' 
    }; 
    loadImages(sources, initStage); 

檢查下面的jsfiddle鏈接，

http://jsfiddle.net/Qnil/XR7vL/