Mi piacerebbe scoprire come aggiungere ombre sfocate sfocate agli oggetti/percorsi di Raphael.js. Per quanto ne so non è possibile con la biblioteca come è, ma c'è un lavoro in giro?Come si possono aggiungere ombre su oggetti Raphael.js?
Aggiunta di un collegamento a Raphael.blur in una risposta separata, secondo la richiesta dell'OP.
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
esempio di codice Aggiornamento:
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
Si noti che nei commenti di Dmitry accenna che non v'è alcun supporto WebKit. Usa l'elemento <filter> e l'effetto del filtro feGaussianBlur. WebKit ha implementato l'effetto feGaussianBlur, ma i filtri sono unstable e sono disabilitati in Safari (potrebbe funzionare in Chrome 5 - dovrebbero sicuramente funzionare in Chrome 6).
Il modo più semplice per farlo è semplicemente disegnare l'oggetto con un riempimento di colore sfumato, spostato di alcuni pixel, quindi disegnare l'oggetto sopra.
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
È anche possibile regolare l'attributo opacità se necessario.
ma un riempimento un'ombra colorata avrà un bordo solido. Sto cercando un bordo sfocato, dal grigio chiaro allo 0% alfa. sai? –
Raphael ha un plug-in di sfocatura. Non l'ho mai usato, quindi non posso garantire per questo, ma è da Dmitry quindi possiamo presumere che lui sa cosa sta facendo ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/ raphael.blur.js –
Oh questo è interessante. Dovresti inviarlo come risposta e lo accetterò. Se non lo fai, risponderò io stesso in 3 giorni. Grazie. Ancora l'ombra esterna dovrebbe essere codificata in Raphael per renderla più semplice. –
Ho scritto un plug-in che aggiunge un'ombra esterna a un elemento applicando un filtro SVG. Si basa sul plugin sfocatura.
Lo si può trovare qui: https://github.com/dahoo/raphael.dropshadow.js
È possibile utilizzare il Element.glow([glow]) per ottenere un effetto ombra. http://raphaeljs.com/reference.html#Element.glow
+1 che ha funzionato per me. Sto facendo un widget generico di bolle usando Raphael e jQuery. Questo aiuta, grazie. –
Grazie per questo, non pensavo di usare il bagliore. Le impostazioni predefinite per il bagliore sono di un colore nero con una opacità di 0,5 che suggerisce che è destinato a essere utilizzato per disegnare le ombre esterne. –
Il collegamento in questa risposta è ora inattivo. Penso che ora tu debba usare un plugin. –
È possibile utilizzare un bagliore per aggiungere ombre.
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
check out il documentation
La funzione '.blur' non è documentata? Non riesco a trovarlo da nessuna parte sui documenti di Raphael. O è nativo? –
È un plug-in di Raphael. Puoi ottenerlo al link sopra e includerlo nella tua pagina dopo raphael.js. –
L'URL del plugin sembra essere rotto (ottenendo un 404), qualcuno ha un link funzionante? – soulBit