拉斐尔阴影效果答案

【问题标题】：Raphael drop shadow effect拉斐尔阴影效果
【发布时间】：2012-06-29 13:16:12
【问题描述】：

有谁知道 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>

【问题讨论】：

标签： javascript raphael shadow

【解决方案1】：

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

~~它似乎只适用于线条，但实际上并不能填充阴影。~~

【讨论】：

好吧，只需设置 fill 属性（设置为任何值，没关系，任何不虚假的都可以），然后你的 gloom() 生成的阴影被填充 - jsfiddle.net/sveinatle/gkayG/3跨度>
@rodneyrehm，太好了，很高兴知道，谢谢！将更新答案。你的链接给了我一个 404 虽然......
是的，jsfiddle 最近遇到了很多问题。正确链接：jsfiddle.net/gkayG/6

【解决方案2】：

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

【讨论】：

插件是其他人构建的功能，我可以通过将其包含在头部中来使用它吗？
这个比较奇怪，不过here的大佬们好像已经想好怎么用了

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

circle.shadow();

会做你想做的事。此外，它是 SVG 滤镜效果的实现（glow() 不是），因此它可以与动画等一起使用。

项目页面在这里：http://chrismichaelscott.github.io/fraphael/。

【讨论】：

【解决方案5】：

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

【讨论】：