如何在Raphael.js对象中添加投影效果？

Question

我想了解如何在Raphael.js对象/路径中添加模糊边缘的阴影。据我所知，该库本身不支持此功能，但是否有解决方法？

- pylonicon

Answer 1

您可以使用 Element.glow([glow]) 来实现阴影效果。详情请参考 http://raphaeljs.com/reference.html#Element.glow。

- David Herse

---

+1 这对我有用。我正在使用 Raphael 和 jQuery 制作一个通用的气泡小部件。这很有帮助，谢谢。 - King Friday

谢谢，我没有想到可以使用glow。glow的默认设置是黑色，不透明度为0.5，这表明它旨在用于绘制投影效果。 - Will Tomlins

这个答案中的链接现在已经失效了。我认为你现在需要使用一个插件来代替它。 - Daniel Arthur

Answer 2

根据提问者的要求，在另一个回答中添加Raphael.blur的链接。

http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js

更新的代码示例：

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);

请注意，在Dmitry的评论中提到没有WebKit支持。他使用了<filter>元素和feGaussianBlur滤镜效果。WebKit已经实现了feGaussianBlur效果，但是滤镜是不稳定的，并且在Safari中被禁用（在Chrome 5中可能可以工作-在Chrome 6中肯定可以工作）。

- C-Mo

---

.blur 函数是否未记录在文档中？在 Raphael 文档中找不到它的任何信息。或者它是本地函数吗？ - Sudhir Jonathan

这是一个 Raphael 插件。您可以在上面的链接中获取它，并在 raphael.js 之后将其包含在您的页面中。 - C-Mo

插件的URL链接好像有问题（出现了404错误），有人有可用的链接吗？ - soulBit

http://code.google.com/p/webdesks/source/browse/trunk/DmitryBaranovskiy-raphael-5b9602d/plugins/?r=9 - Alex

Answer 3

我写了一个插件，通过应用SVG滤镜为元素添加了一层阴影。它基于模糊插件开发而成。你可以在这里找到它：https://github.com/dahoo/raphael.dropshadow.js。

- dahoo

Answer 4

最简单的方法就是使用阴影颜色填充物绘制对象，并偏移几个像素，然后在其上方绘制实际对象。

var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);

如果需要，您还可以调整不透明度属性。

- C-Mo

---

但是阴影着色填充将具有实心边缘。我正在寻找一种模糊的边缘，从浅灰色到0％ alpha。你知道吗？ - pylonicon

Raphael确实有一个模糊插件。我从未使用过，所以无法担保它的质量，但既然是Dmitry编写的，我们可以假设他知道自己在做什么;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js - C-Mo

哦，那很有趣。你应该将它作为答案提交，我会接受它。如果你不这样做，我会在3天内自己回答。谢谢。仍然应该将阴影编码到Raphael中，以使其更简单。 - pylonicon

Answer 5

你可以使用发光效果来添加阴影。

.glow({ color: '#900', width:10, offsetx:5 }) // 随机示例...

请查看文档。

- user2489804