如何用Raphael在對象的內邊緣上創建漸變填充？

我有一個動態生成的圖形，說明了相對於物品的寬度和厚度，適合容器的物品的範圍。我試圖表明，靠近「合適範圍」邊緣的項目可能不如接近圖形中間的項目合適。要做到這一點，我想填充我的形狀與綠色，其中有一個漸變，在邊緣變成黃色。如下圖所示，這個黃色區域應該在整個內邊緣上具有均勻的厚度。拉斐爾怎麼能做到這一點？我知道如何做一個堅實的填充;漸變是我遇到困難的地方。在此先感謝您的幫助！如何用Raphael在對象的內邊緣上創建漸變填充？

Gradient Example

來源

2011-10-13 dtone

理論上應該可以通過將圖切成四個三角形來做到這一點。

Slice the graph into four rectangles

每個三角形然後可以填充有梯度主要是您的固色，但在一端它變成你的邊緣的顏色。通過在漸變上設置直角，可以使其看起來像只有圖上的邊具有不同的顏色。

Graph with edges in another color

我創建上述使用以下代碼的矩形。

var slice1 = paper.path("M200 200L100 100L300 100").attr({ 
    "fill": "90-#0f0:70-#ff0:95", 
}); 

var slice2 = paper.path("M200 200L300 100L300 300").attr({ 
    "fill": "0-#0f0:70-#ff0:95", 
}); 

var slice3 = paper.path("M200 200L300 300L100 300").attr({ 
    "fill": "270-#0f0:70-#ff0:95", 
}); 

var slice4 = paper.path("M200 200L100 300L100 100").attr({ 
    "fill": "180-#0f0:70-#ff0:95", 
});

雖然您的情況會稍微複雜一些。您必須首先找到圖形的中間部分，才能將其切成三角形。然後你需要找到每個梯度的角度。

來源

2011-10-13 21:59:25

感謝您的幫助，喬納斯。我很好地調整了這一點，但是由於我的圖形變化很大，很難讓梯度看起來很平滑。我最終放棄了漸變的想法，儘管它會更漂亮，並且只是畫了兩個形狀，綠色的形狀在黃色的頂部。感謝您的建議！ – dtone

晚報，

它並不像它看起來應該是一樣容易。可能是由於如何在VML中實現它的問題。

我能做的最好的事情是在原始背景中使用稍大的目標對象克隆，然後使用漸變填充。

我已經做出了表率in this fiddle

希望有所幫助。

來源

2011-10-13 19:23:56 amadan

顯然，你的目標對象的複雜性將決定這是否是獲得您想要的結果的有效方法。您的里程可能會有所不同... – amadan

你可以使用一個徑向漸變上overllying橢圓形，但將留下的黃色一個相當大的角落裏要找到你的對象中心用好老getBBox（）

來源

2011-10-13 23:56:59 Chasbeen

如何用Raphael在對象的內邊緣上創建漸變填充？

回答

相關問題