Kineticjs: Rotate a group around a point

Question

How can I rotate a group of objects around a point? I have a set of shapes in the same group and I would like to rotate it around an arbitrary point. I made an example, but it didn't work very well: http://jsfiddle.net/cequiel/Fn5Ba/2/

In the above example, you can resize the rectangle by dragging the corners. If you want to rotate the rectangle around the black point, just press the 'rotate' button. The first time it works fine, but not the second time. Here's the rotate function:

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

I have probably explained wrong. I wanted to rotate a list of objects around an arbitrary point. The trick consist of using different groups. One group to rotate, another group to translate and another group to scale. Here's an example:

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

Answer 2

Add a div with id as 'container' and include the below script within script tag:

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