I don't know how to use Raphael JS events.

I need some example. I see the documentation and a function must be passed, but is not working.

Someone can provide some example of how to get the mouse position of a click in the canvas?

EDIT: I see in documentation events for Element. This will work for Paper? How I create a mousedown() event for Paper?

I don't know how to use Raphael JS events.

I need some example. I see the documentation and a function must be passed, but is not working.

Someone can provide some example of how to get the mouse position of a click in the canvas?

EDIT: I see in documentation events for Element. This will work for Paper? How I create a mousedown() event for Paper?

• javascript
• events
• raphael

• Are you using Raphael 2? – CamelCamelCamel Commented Oct 5, 2011 at 19:51
• @Radagaisus Raphael JS, a javascript library for drawnig, graphics, etc. – Renato Dinhani Commented Oct 5, 2011 at 19:55
• I know :) a few days ago version 2 of the library was published. Thus my question. – CamelCamelCamel Commented Oct 5, 2011 at 20:03

2 Answers 2

clickEvent = function(){
    alert("Hello World!");
}

paper = Raphael(...);
paper.raphael.click(clickEvent);

p.mouseover(function () {
   p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
   txt.stop().animate({opacity: 1}, ms, "elastic");
}).mouseout(function () {
   p.stop().animate({transform: ""}, ms, "elastic");
   txt.stop().animate({opacity: 0}, ms);
});

check out the source code in the Raphael examples.

Here's another example with a click event:

movers[2].click(function () {
  this.cx = this.cx || 300;
  this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.2, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<");
  this.cx = this.cx == 300 ? 100 : 300;
});

which is taken from the easing example.

I don't know if the code will work on version 2, though