Как добавить тени к объектам Raphael.js?

Question

Я хотел бы узнать, как добавить размытые края с тенями в объекты / пути Raphael.js Насколько я знаю, это не возможно с библиотекой, как есть, но есть ли обход?

Answer 1

Вы можете использовать Element.glow([glow]), чтобы получить эффект тени.http://raphaeljs.com/reference.html#Element.glow

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

Обратите внимание, чтов комментариях Дмитрия он упоминает, что нет поддержки WebKit.Он использует элемент <filter> и эффект фильтра feGaussianBlur.В WebKit реализован эффект feGaussianBlur, но фильтры нестабильны и отключены в Safari (он может работать в Chrome 5 - обязательно должен работать в Chrome 6).

Answer 3

Я написал плагин, который добавляет тень к элементу, применяя к нему SVG-фильтр.Он основан на плагине размытия.

Вы можете найти его здесь: https://github.com/dahoo/raphael.dropshadow.js

Answer 4

Самый простой способ сделать это - просто нарисовать объект с теневой заливкой, смещенный на несколько пикселей, а затем нарисовать фактический объект сверху.

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

Вы также можете настроитьатрибут непрозрачности, если необходимо.

Answer 5

Вы можете использовать свечение, чтобы добавить тени.

.glow({ color: '#900', width:10, offsetx:5 }) // random example...

ознакомьтесь с документацией