Rapaeljs drag with rotate

http://stackoverflow.com/questions/7837831/drag-paths-in-raphaeljs-when-rotation-or-scale-is-changed

by ipoly

HTML

<button onclick='rotate()'>Rotate</button>
<div id="holder"></div>

CSS

#holder {border:1px solid red}

JavaScript

paper = Raphael(document.getElementById("holder"), 768, 1024);

var startPath = function () {
  this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
  this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
},
movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.transform("…T"+[trans_x,trans_y]);
  this.ox = dx;
  this.oy = dy;
},
  upPath = function () {
  // nothing special
};

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z";

shape = paper.path(drawing);;
shape.translate(0,0);
shape.scale(1,1);

shape.attr({
  'stroke': '#000000',
  'fill': 'blue',
  'stroke-width': '5',
});

shape.drag(movePath, startPath, upPath);
angle = 0
rotate = function(){
    angle += 90;
    shape.animate({transform:'r'+angle},400,">");
    return null;
}