Drag, drop and shape rotation with Raphael JS

Question

I\'m using RaphaelJS 2.0 to create several shapes in a div. Each shape needs to be able to be dragged and dropped within the bounds of the div, independently. Upon double

Answer 1

I usually create an object for my shape and write the event handling into the object.

function shape(x, y, width, height, a)
{
  var that = this;
  that.angle = 0;
  that.rect = R.rect(x, y, width, height).attr(a);

  that.rect.dblclick(function() {
      that.angle -= 90;
      that.rect.stop().animate({
          transform: "r" + that.angle }, 1000, "<>");
  });
  return that;
}

In the above, the constructor not only creates the rectangle, but sets up the double click event.

One thing to note is that a reference to the object is stored in "that". This is because the "this" reference changes depending on the scope. In the dblClick function I need to refer to the rect and angle values from my object, so I use the stored reference that.rect and that.angle

See this example (updated from a slightly dodgy previous instance)

There may be better ways of doing what you need, but this should work for you.

Hope it help,

Nick

---

Addendum: Dan, if you're really stuck on this, and can live without some of the things that Raphael2 gives you, I'd recommend moving back to Raphael 1.5.x. Transforms were just added to Raphael2, the rotation/translation/scale code is entirely different (and easier) in 1.5.2.

Look at me, updating my post, hoping for karma...