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 с идентификатором в качестве «контейнера» и включают в себя ниже скрипт внутри тега сценария:

 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(); 
});