拉斐爾陰影效果

有誰知道拉斐爾是否支持使用陰影效果。我正在嘗試爲我創建的對象創建投影。這裏是我的代碼，但我無法弄清楚如何添加陰影。如果你能讓我的經理變得非常沮喪，請幫助我。拉斐爾陰影效果

<html> 
<head><title></title> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script> 
</head> 

<body> 

<div id="draw-here-raphael" style="height: 200px; width: 400px;"> 
</div> 

<script type="text/javascript"> 
//all your javascript goes here 

var r = new Raphael("draw-here-raphael"), 

    // Store where the box is 
    position = 'left', 

    // Make our pink rectangle 
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"}); 

</script> 

</body> 
</html>

來源

2012-06-29 John Doe

的.glow() - 方法可以用來在一定程度上：

var circle = paper.circle(100,100,50); 
var path = paper.path('m200,50 l100,0 l100,100 l0,100 z'); 

circle.glow(); 

path.attr({ 
    fill: 'blue' 
}); 
path.glow({ 
    color: '#444', 
    offsety: 20 
});

看到它在這裏的行動：http://jsfiddle.net/sveinatle/gkayG/7/

~~它似乎只對線的工作，雖然，它實際上並沒有填寫影子。~~

來源

2012-06-29 13:40:29 Supr

非常感謝！這將需要工作。 –

那麼，簡單地設置填充屬性（無論什麼值，無所謂，不會造成任何錯誤），你的發光（） - 產生的陰影填充 - http://jsfiddle.net/sveinatle/gkayG/ 3/ – rodneyrehm

@rodneyrehm，太好了，很高興知道，謝謝！將更新答案。你是鏈接給我一個404雖然... – Supr

Raphaeljs本身沒有這樣的功能，但plugins可能會幫助那裏。另外，對於簡單的形狀，我認爲效果可以通過渲染兩次進行模擬，首先用黑色部分透明度和一點偏移（模仿陰影），然後將形狀本身放在它上面。

來源

2012-06-29 13:24:33 Qnan

是一個插件的功能，別人建我可以通過將其包括在頭部使用？ –

這個很奇怪，但是這裏的人（https://groups.google.com/d/msg/raphaeljs/S04MBOdf-v0/JxgIuE-24-8J）似乎已經想出瞭如何使用它 – Qnan

非常感謝你的先生！ –

老問題，但我更喜歡繪製下面的對象的克隆，每個像素都從前一個像素中刪除，以獲得3D效果。

Raphael.el.depth = function(z, shade) { 
    z = (typeof z !== "undefined") ? z : 5; 
    shade = (typeof shade !== "undefined") ? shade : '#999'; 
    for (var c = 0; c < z; c += 1) { 
     var s = this.clone().attr({ 'fill': shade }).transform("t" + (c + 1) + "," + (c + 1)); 
    } 
    this.toFront(); 
};

來源

2012-12-21 19:27:50

我寫了一個處理這種事情的擴展。它很容易使用：

circle.shadow();

會做你想做的。此外，它的SVG濾鏡效果的實現（glow()不是），所以它會與動畫合作等

該項目頁面是在這裏：http://chrismichaelscott.github.io/fraphael/。

來源

2013-07-23 17:22:24 chrismichaelscott

另一個很好的解決方案是使用clone()函數。這是很好的選擇，因爲它可以用於複雜的paths。它真的看起來像一個影子。

退房的DEMO：

var r = new Raphael(10,10, 500, 500); 
var p = r.path("M100,300 L100,100 C100,100 250,100 250,300z"); 
p.attr({fill: 'yellow'}); 

p2 = p.clone(); 
p2.attr({fill:'gray', stroke:'none'}).transform('t7,5'); 

p.toFront();

來源

2013-07-23 18:33:08 Brian

拉斐爾陰影效果

回答

相關問題