16
Я хотел бы узнать, как добавить размытые красные тени в объекты Raphael.js/пути. Насколько я знаю, с библиотекой это невозможно, но есть ли работа вокруг?Как добавить тени к объектам Raphael.js?
A
ответ
11
Добавить ссылку на Raphael.blur в отдельном ответе на запрос OP.
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, но фильтры unstable и отключены в Safari (он может работать в Chrome 5 - обязательно должен работать в Chrome 6).
2
Самый простой способ сделать это - просто нарисовать объект с заполнением теней, смещенным на несколько пикселей, а затем нарисовать фактический объект сверху.
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
Вы также можете настроить атрибут непрозрачности, если это необходимо.
+0
но заливка тени цветные будет иметь прочную кромку. Я ищу краску, которая размыта, от светло-серого до 0% альфы. вы знаете? – 2010-10-07 03:38:43
+1
У Рафаэля есть плагин размытия. Я никогда не использовал его, поэтому я не могу ручаться за него, но это от Дмитрия, поэтому мы можем предположить, что он знает, что он делает ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/ raphael.blur.js –
+0
О, это интересно. Вы должны представить его в качестве ответа, и я соглашусь с ним. Если вы этого не сделаете, я отвечу сам за 3 дня. Благодарю. Капля тени должна быть закодирована в Рафаэле, чтобы сделать ее проще. – 2010-10-07 18:39:46
5
Я написал плагин, который добавляет тень к элементу, применяя к нему фильтр SVG. Он основан на плагине размытия.
Вы можете найти его здесь: https://github.com/dahoo/raphael.dropshadow.js
15
Вы можете использовать Element.glow([glow]), чтобы получить эффект тени. http://raphaeljs.com/reference.html#Element.glow
+0
+1, который работал на меня. Я делаю общий виджет пузыря, используя Raphael и jQuery. Это помогает, спасибо. –
+0
Спасибо за это, не подумал использовать свечение. По умолчанию для свечения черный цвет с непрозрачностью 0,5, что предполагает, что он предназначен для рисования тени. –
+0
Ссылка в этом ответе теперь неактивна. Думаю, теперь вам нужно использовать плагин. –
0
Вы можете использовать свечение, чтобы добавить тени.
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
ЗАКАНЧИВАТЬ documentation
Функция '.blur' недокументирована? Не могу найти его нигде в документах Рафаэля. Или это родной? –
Это плагин Рафаэля. Вы можете получить его по ссылке выше и включить ее на свою страницу после raphael.js. –
URL-адрес плагина, кажется, сломан (получение 404), у кого есть рабочая ссылка? – soulBit