拉斐尔投影效果

时间:2012-06-29 13:16:12

标签: javascript raphael shadow

有没有人知道Raphael是否支持使用投影。我正在尝试为我创建的对象创建一个投影。这是我的代码,但我无法弄清楚如何添加投影。如果你的经理对我变得非常沮丧,请帮助我。

<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>

5 个答案:

答案 0 :(得分:7)

.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/

它似乎只适用于线条,它实际上并没有填充阴影。

答案 1 :(得分:1)

Raphaeljs本身没有这样的功能,但plugins可能对此有所帮助。此外,对于简单的形状,我认为效果可以通过渲染两次来模拟,首先是黑色,部分透明度和一点偏移(模仿阴影),然后是形状本身。

答案 2 :(得分:1)

老问题,但我更喜欢在其下方绘制对象的克隆,每个像素都从前一个像素中删除,以获得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();
}; 

答案 3 :(得分:0)

我写了一个扩展来处理这种事情。它真的很容易使用:

circle.shadow();

会做你想要的。此外,它是SVG滤镜效果的实现(glow()不是),因此它可以用于动画等。

项目页面位于:http://chrismichaelscott.github.io/fraphael/

答案 4 :(得分:0)

另一个非常好的解决方案是使用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();