我想了解如何向Raphael.js对象/路径添加模糊边缘阴影。据我所知,这是不可能的图书馆,但是有解决方法吗?
答案 0 :(得分:15)
您可以使用Element.glow([glow])
获得阴影效果。 http://raphaeljs.com/reference.html#Element.glow
答案 1 :(得分:11)
根据OP的要求,在单独的答案中添加指向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效果,但过滤器为unstable并且在Safari中被禁用(它可能在Chrome 5中有效 - 应该可以在Chrome 6中使用)。
答案 2 :(得分:5)
我编写了一个插件,通过对元素应用SVG过滤器为元素添加阴影。 它基于模糊插件。
答案 3 :(得分:2)
最简单的方法是使用阴影色填充绘制对象,偏移几个像素,然后在顶部绘制实际对象。
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
如果需要,您还可以调整不透明度属性。
答案 4 :(得分:0)