Raphael bagliore interno?

Question

Sto cercando un modo per ottenere solo un bagliore o un'ombra interiore su un percorso di Raffaello. Sfortunatamente, puoi solo eseguire gradienti radiali su un'ellisse o un cerchio.

Un'idea potrebbe essere quella di creare una serie di percorsi che sono leggermente più piccoli e adattarsi all'interno del percorso originale e quindi dare loro diversi colori di tratto, ma non ho idea di come mi avvicinerei a questo. Qualche funzione che prende il percorso e sottrae o aggiunge valori ai numeri a seconda di dove sono ... Comunque, se qualcuno ha qualche idea, o forse un'altra libreria javascript che fa questo, sarebbe fantastico.

Answer 1

Ok ecco come si può raggiungere questo obiettivo. È piuttosto semplice, penso. So che è difficile creare manualmente un percorso shadow dal tuo originale. Ma c'è un trucco chiamato funzione scale(). Passi per come è possibile ottenere un'ombra interna o l'effetto bagliore interno:

1. Crea il tuo percorso
2. Clone in un altro percorso
3. Impostare la scala() del percorso clonato per essere 0,9 * originale
4. Poi nascondere il percorso clonato, ma applicare la funzione bagliore() su di esso

il codice:

var paper = Raphael("notepad", 500, 500); 

var path = paper.path("M 50 200 L 120 100 200 190 80 250z"); 
var shadow = path.clone().scale(0.9).hide(); 


shadow.glow(); 
path.attr({stroke: "darkred"}); 

Guarda lo DEMO, questo non è perfetto ma con piccoli cambiamenti, puoi ottenere quello che vuoi.

anche come nota a margine: funzione
glow() ha attributi come offsetx, offsety, opacity ... Cambiando gli attributi vi darà la vostra preferita ombra/luce.

codice aggiornatohttp://jsfiddle.net/jUTFm/41/

Answer 2

Look here. Potresti provare ad animare la larghezza del percorso e ad oscurare gradualmente il colore per dare un po 'di effetto luminoso.

check-out la parte inferiore

brain = paper.add(brain); 

    brain.attr('stroke', '#ff0'); 

    brain.transform('s 0.5, 0.5 0 0'); 

    glow = brain.glow({ 
    color: '#ff0', 
    width: 5 
    }); 

    anim = Raphael.animation({ 
    "stroke-width": 15, 
    opacity: 1 
    }, 500); 


    anim = anim.repeat(Infinity); 
    glow.animate(anim);