title: Kineticjs: Rotate a group around a point
body: <p>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:
  <a href="http://jsfiddle.net/cequiel/Fn5Ba/2/" rel="nofollow noreferrer">http://jsfiddle.net/cequiel/Fn5Ba/2/</a></p>
  
  <p>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:</p>
  
  <pre><code>// 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();
  });
  </code></pre>