efecto de sombra de gota de Rafael

¿Alguien sabe si Raphael admite el uso de una sombra paralela? Estoy tratando de crear una sombra paralela para un objeto que he creado. Aquí está el código que tengo, pero no puedo entender cómo agregaría una sombra paralela. Por favor, ayúdenme si puede mi gerente se está poniendo muy frustrado conmigo.efecto de sombra de gota de Rafael

<html> 
<head><title></title> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script> 
</head> 

<body> 

<div id="draw-here-raphael" style="height: 200px; width: 400px;"> 
</div> 

<script type="text/javascript"> 
//all your javascript goes here 

var r = new Raphael("draw-here-raphael"), 

    // Store where the box is 
    position = 'left', 

    // Make our pink rectangle 
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"}); 

</script> 

</body> 
</html>

Fuente

2012-06-29 John Doe

El -method .glow() se puede utilizar hasta cierto punto:

var circle = paper.circle(100,100,50); 
var path = paper.path('m200,50 l100,0 l100,100 l0,100 z'); 

circle.glow(); 

path.attr({ 
    fill: 'blue' 
}); 
path.glow({ 
    color: '#444', 
    offsety: 20 
});

verlo en acción aquí: http://jsfiddle.net/sveinatle/gkayG/7/

~~Parece que sólo funciona para las líneas sin embargo, que en realidad no se llena la sombra.~~

Fuente

2012-06-29 13:40:29 Supr

Muchas gracias !!! Eso tendrá que funcionar. –

Bueno, simplemente establece la propiedad de relleno (a cualquier valor, no importa, lo que no es falso lo hará) y tu sombra (se produce) se llena - http://jsfiddle.net/sveinatle/gkayG/ 3/ – rodneyrehm

@rodneyrehm, Genial, es bueno saberlo, ¡gracias! Actualizará la respuesta. Tu enlace me da un 404 aunque ... – Supr

Raphaeljs no tiene por sí misma esa funcionalidad, pero plugins podría ayudar allí. Además, para las formas simples, creo que el efecto se puede simular al representarlo dos veces, primero en negro con transparencia parcial y un pequeño desplazamiento (para imitar la sombra), y luego la forma misma sobre él.

Fuente

2012-06-29 13:24:33 Qnan

es un plugin de una función que alguien construyó que puedo usar mediante su inclusión en la cabeza? –

este es bastante raro, pero los chicos [aquí] (https://groups.google.com/d/msg/raphaeljs/S04MBOdf-v0/JxgIuE-24-8J) parecen haber descubierto cómo usarlo – Qnan

¡¡Muchas gracias señor !!! –

Pregunta anterior, pero prefiero dibujar clones del objeto debajo de cada uno, un píxel eliminado del anterior, para obtener un efecto 3D.

Raphael.el.depth = function(z, shade) { 
    z = (typeof z !== "undefined") ? z : 5; 
    shade = (typeof shade !== "undefined") ? shade : '#999'; 
    for (var c = 0; c < z; c += 1) { 
     var s = this.clone().attr({ 'fill': shade }).transform("t" + (c + 1) + "," + (c + 1)); 
    } 
    this.toFront(); 
};

Fuente

2012-12-21 19:27:50

Escribí una extensión para manejar este tipo de cosas. Es realmente fácil de usar:

circle.shadow();

haría lo que desee. Además, es una implementación de efectos de filtro SVG (que no es glow()) por lo que funcionará con animaciones, etc.

La página del proyecto está aquí: http://chrismichaelscott.github.io/fraphael/.

Fuente

2013-07-23 17:22:24 chrismichaelscott

Otra muy buena solución es utilizar la función clone(). Esta es una buena alternativa ya que funcionará con el complejo paths. Y realmente parece una sombra.

Mira la DEMO:

var r = new Raphael(10,10, 500, 500); 
var p = r.path("M100,300 L100,100 C100,100 250,100 250,300z"); 
p.attr({fill: 'yellow'}); 

p2 = p.clone(); 
p2.attr({fill:'gray', stroke:'none'}).transform('t7,5'); 

p.toFront();

Fuente

2013-07-23 18:33:08 Brian

efecto de sombra de gota de Rafael

Respuesta

Cuestiones relacionadas