CODEWITHSUNDEEP
htmlraphael
supersize
supersize

Reputation: 14773

function on currently clicked raphael.js item

I am using Raphael.js for drawing some shapes and i would like to know how it is possible to select the current by clicking on it and fire a click() function.

I'm having this function:

function selectItem() { 
    console.log("selected" + this.id);
    rect.attr({
        fill: "#ff0"
    });

and I'm trying to use this:

this.click(selectItem);

as known Raphael uses its own click-function, and i thought this would work. Unfortanetly it does not. Thanks in advance.

Upvotes: 1

Views: 238

Answers (1)

Brian
Brian

Reputation: 5028

You can do the following to use Raphael's click() function, check the DEMO:

This simple code uses click() function:

var paper = Raphael("area", 400, 400);
var r = paper.rect(100, 50, 80, 60, 10).attr({fill: 'yellow', stroke: 'red'}),
    c = paper.circle(200, 200, 50).attr({fill: 'yellow', stroke: 'red'});


r.click(function() {
    // add your console.log if needed
    r.attr({fill: 'red', stroke: 'yellow', "stroke-width": 2});
    c.attr({fill: 'yellow', stroke: 'red'});
});

c.click(function() {
    c.attr({fill: 'red', stroke: 'yellow', "stroke-width": 2});
    r.attr({fill: 'yellow', stroke: 'red'});
});

Now, if you want to use this, then remember that it only works when you are using it within the scope of element creation. You can either manually add this code for all your elements, or create couple of arrays to keep your elements in it. Then if you know the index of on which you want to apply click(), just call it by arr[ind].click().

EDIT: look at this demo, i used this.

Upvotes: 2

Related Questions