2012-04-06 92 views
0

如果我有像http://raphaeljs.com/ball.html這樣的項目,如何通過DOM修改它以更改特定實例的顏色?從Raphael.js修改對象

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); 
    } 

我在文檔中創建一個 「球」(文件撰寫(active_div,0.3459912),現在我想改變顏色

調用drawBall用。同格,只是在DIV創建另一個 「球」。

回答

0

這個怎麼樣?

X.attr("fill", newColor); 

其中newColor是您想要更改其顏色的變量的名稱。

+0

我認爲這也可以,但代碼告訴我'X是未定義的'。看來,使用getElementById()的對象看起來是'a',但是當我調用a.attr時,它返回undefined。 – user1318036 2012-04-08 16:48:27

1

嘗試

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

您可以使用任何顏色像像#00CC33色相yellow或顏色代碼。
Demo

+0

你的演示程序看起來和我一樣工作。我可以整天添加新的「對象」。我需要改變一個現有的。 – user1318036 2012-04-08 16:45:36

+0

在你的代碼中'X'是一個局部變量,所以一旦執行函數,你就不能改變X,這意味着你不能改變創建的球。當你創建球時,變量'X'可以放在一個數組中,當你想編輯任何屬性(顏色在這裏)時,從數組和你的'.attr'方法中取出引用。 – xyz 2012-04-08 19:20:55