[英]How can one add drop shadows to Raphael.js objects?
我想了解如何向Raphael.js对象/路径添加模糊的边缘阴影。 据我所知,使用库是不可能的,但是可以解决吗?
您可以使用Element.glow([glow])
获得阴影效果。 http://raphaeljs.com/reference.html#Element.glow
根据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效果,但是过滤器不稳定并且在Safari中被禁用(它可能在Chrome 5中可用-绝对应该在Chrome 6中起作用)。
我编写了一个插件,该插件通过对元素应用SVG过滤器来向其添加阴影。 它基于模糊插件。
您可以在这里找到它: https : //github.com/dahoo/raphael.dropshadow.js
最简单的方法是简单地用阴影色填充对象(偏移几个像素),然后在顶部绘制实际对象。
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
如果需要,您还可以调整opacity属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.