CODEWITHSUNDEEP
javascriptdomraphael
user1318036
user1318036

Reputation: 5

Modifying object(s) from Raphael.js

If I have a item like http://raphaeljs.com/ball.html, how can I modify it via DOM, to change the color of a specific instance?

EX:

Raphael.fn.ball = function (x, y, r, hue) {
        hue = hue || 0;
        return this.set(
            this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
            this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
            this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
        );
    };

function drawBall(div_id, color) {
        var X = Raphael(div_id), x = 100, y = 80, r = 50;
        X.ball(x, y, r, color);
    }

I do create a "Ball" (document.write(active_div, 0.3459912) in the document, and now I want to change the color.

Calling drawBall with the same div, just creates another "ball" in the DIV.

Upvotes: 0

Views: 257

Answers (2)

Ajinkya
Ajinkya

Reputation: 22710

Try

var hue = hue;  
X.attr("fill", r(.3,.25) white-" + hue);

You can use any color like yellow or color code like #00CC33 for hue.
Demo.

Upvotes: 1

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

What about this?

X.attr("fill", newColor);

Where newColor is the name of the variable you'd like to change its color to.

Upvotes: 0

Related Questions