Me gustaría saber cómo agregar sombras descendentes borrosas a los objetos/rutas de Raphael.js. Por lo que yo sé, no es posible con la biblioteca tal como está, pero ¿hay algún problema?¿Cómo se pueden agregar sombras a los objetos Raphael.js?
Adición de un enlace a Raphael.blur en una respuesta por separado, por solicitud de la OP.
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
Actualizado ejemplo de código:
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
Tenga en cuenta que en los comentarios de Dmitry menciona que no hay apoyo WebKit. Utiliza el elemento <filter> y el efecto de filtro feGaussianBlur. WebKit ha implementado el efecto feGaussianBlur, pero los filtros son unstable y están deshabilitados en Safari (puede funcionar en Chrome 5, definitivamente debería funcionar en Chrome 6).
La forma más sencilla de hacerlo es simplemente para dibujar el objeto con un relleno de color de sombra, compensado por unos pocos píxeles y, a continuación, dibuje el objeto real en la parte superior.
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
También puede ajustar el atributo de opacidad si es necesario.
pero un relleno de color sombra tendrá una ventaja sólida. Estoy buscando un borde borroso, desde gris claro hasta 0% alfa. ¿ya sabes? –
Raphael tiene un complemento de desenfoque. Nunca lo he usado, así que no puedo responderlo, pero es por Dmitry así que podemos suponer que él sabe lo que está haciendo ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/ raphael.blur.js –
Oh, eso es interesante. Debe enviarlo como una respuesta y yo lo aceptaré. Si no lo haces, lo responderé yo mismo en 3 días. Gracias. Aún así, la sombra paralela debe codificarse en Rafael para que sea más simple. –
escribí un plugin que añade una sombra a un elemento mediante la aplicación de un filtro SVG a ella. Se basa en el complemento de desenfoque.
Se puede encontrar aquí: https://github.com/dahoo/raphael.dropshadow.js
Puede utilizar el Element.glow([glow]) para conseguir un efecto de sombra. http://raphaeljs.com/reference.html#Element.glow
1 que trabajó para mí. Estoy haciendo un widget de burbuja genérico usando Raphael y jQuery. Esto ayuda, gracias. –
Gracias por esto, no pensé en usar resplandor. Los valores predeterminados para el brillo son un color negro con una opacidad de 0,5 que sugiere que está destinado a ser utilizado para dibujar sombras. –
El enlace en esta respuesta está ahora inactivo. Creo que ahora necesitas usar un complemento. –
Puede utilizar un brillo a añadir sombras.
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
salida la documentation
¿La función '.blur' está indocumentada? No puedo encontrarlo en ningún lado en los documentos de Raphael. ¿O es nativo? –
Es un plugin de Raphael. Puede obtenerlo en el enlace de arriba e incluirlo en su página después de raphael.js. –
La URL del complemento parece estar rota (obteniendo un 404), ¿alguien tiene un enlace que funcione? – soulBit