Kineticjs：圍繞一個點旋轉一組

Question

如何繞一個點旋轉一組對象？我在同一組中有一組形狀，我想圍繞任意點旋轉它。我舉了一個例子，但是效果不好： http://jsfiddle.net/cequiel/Fn5Ba/2/

在上面的例子中，你可以通過拖動角來調整矩形的大小。如果你想旋轉黑點周圍的矩形，只需按'旋轉'按鈕。第一次它工作正常，但不是第二次。這裏的旋轉功能：

// rotate event handler 
$('#rotate').click(function() { 
    var offset0 = group.getOffset(); 
    var offset1 = center.getPosition(); 

    // change offset, rotate and move 
    group.setOffset(offset1); 
    group.rotate(0.1); 
    group.move(offset1.x - offset0.x, offset1.y - offset0.y); 

    layer.draw(); 
}); 

Answer 1

添加一個div id作爲「容器」，包括腳本標記中的以下腳本：

 var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 1000, 
      height: 1000 
     }); 
     var layer = new Kinetic.Layer(); 

var height = 200; 
var width = 300; 
var x = 400; 
var y = 300; 

var group = new Kinetic.Group({ 
    x: x, 
    y: y, 
    offset:[x + width/2,y + height/2], 
    draggable: true 
}); 


     var yellowRect = new Kinetic.Rect({ 
      x: x, 
      y: y, 
      width: width, 
      height: height, 
      fill: 'yellow', 
      stroke: 'black', 
      strokeWidth: 4, 

     }); 

var greenCircle = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      radius:5, 
      fill: 'green', 
      stroke: 'black', 
      strokeWidth: 4 

     }); 

var orangeCircle = new Kinetic.Circle({ 
      x: x + width, 
      y: y, 
      radius:5, 
      fill: 'orange', 
      stroke: 'black', 
      strokeWidth: 4, 
     }); 

var redCircle = new Kinetic.Circle({ 
      x: x, 
      y: y + height, 
      radius:5, 
      fill: 'red', 
      stroke: 'black', 
      strokeWidth: 4, 
     }); 

var blueCircle = new Kinetic.Circle({ 
      x: x + width, 
      y: y + height, 
      radius:5, 
      fill: 'blue', 
      stroke: 'black', 
      strokeWidth: 4, 
     }); 


     group.add(yellowCircle); 
     group.add(greenCircle); 
     group.add(orangeCircle); 
     group.add(redCircle); 
     group.add(blueCircle); 
     layer.add(group); 
     stage.add(layer); 

     // one revolution per 4 seconds 
     var angularSpeed = Math.PI/2; 
     var anim = new Kinetic.Animation(function(frame) { 
      var angleDiff = frame.timeDiff * angularSpeed/500; 
      group.rotate(angleDiff); 

     }, layer); 

     anim.start(); 

Answer 2

我可能已經解釋錯了。我想旋轉任意點周圍的對象列表。技巧包括使用不同的組。一組旋轉，另一組翻譯，另一組進行縮放。這裏有一個例子：

http://jsfiddle.net/cequiel/H54Um/

var stage = new Kinetic.Stage({ 
    container: 'canvas', 
    x: 320, 
    y: 240, 
    width: 640, 
    height: 480 
}); 
var layer = new Kinetic.Layer(); 
var translateGroup = new Kinetic.Group(); 
var rotateGroup = new Kinetic.Group(); 
var scaleGroup = new Kinetic.Group({ 
    offsetX: 100, 
    offsetY: 75 
}); 

// adds a yellow rectangle to the scaleGroup 
var rect = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 200, 
    height: 150, 
    fill: 'yellow', 
    stroke: 'black' 
}); 
scaleGroup.add(rect); 

// adds a semitransparent green circle to the scaleGroup 
var circ = new Kinetic.Circle({ 
    x: 200, 
    y: 75, 
    radius: 60, 
    fill: 'green', 
    stroke: 'black', 
    opacity: 0.2 
}); 
scaleGroup.add(circ); 

rotateGroup.add(scaleGroup); 
translateGroup.add(rotateGroup); 
layer.add(translateGroup); 
stage.add(layer); 

// action handlers 
$('#up').click(function() { 
    translateGroup.move(0, -5); 
    layer.draw(); 
}); 
$('#down').click(function() { 
    translateGroup.move(0, +5); 
    layer.draw(); 
}); 
$('#left').click(function() { 
    translateGroup.move(-5, 0); 
    layer.draw(); 
}); 
$('#right').click(function() { 
    translateGroup.move(+5, 0); 
    layer.draw(); 
}); 
$('#rotate1').click(function() { 
    rotateGroup.rotate(0.1); 
    layer.draw(); 
}); 
$('#rotate2').click(function() { 
    rotateGroup.rotate(-0.1); 
    layer.draw(); 
}); 
$('#scaleh1').click(function() { 
    scaleGroup.setScaleX(scaleGroup.getScaleX() + 0.02); 
    layer.draw(); 
}); 
$('#scaleh2').click(function() { 
    scaleGroup.setScaleX(scaleGroup.getScaleX() - 0.02); 
    layer.draw(); 
}); 
$('#scalev1').click(function() { 
    scaleGroup.setScaleY(scaleGroup.getScaleY() + 0.02); 
    layer.draw(); 
}); 
$('#scalev2').click(function() { 
    scaleGroup.setScaleY(scaleGroup.getScaleY() - 0.02); 
    layer.draw(); 
});