Comment ajouter des ombres portées aux objets Raphael.js?

Je voudrais savoir comment ajouter des flous, des ombres portées à bords de Raphael.js les objets/les chemins. Autant que je sache, il n'est pas possible avec la bibliothèque est aussi, mais est-il un travail?

source d'informationauteur

  1. 11

    Ajout d'un lien vers Raphaël.le flou dans une réponse distincte, conformément à la demande du commettant.

    http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js

    Mise à jour du code de l'échantillon:

    var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);

    Noter que dans Dmitry les commentaires, il mentionne qu'il n'y a pas de support de WebKit. Il utilise le <filter> élément et le feGaussianBlur effet de filtre. WebKit a mis en œuvre le feGaussianBlur effet, mais les filtres sont instable et sont désactivés dans Safari (il peut travailler dans Chrome 5 - devrait certainement travailler dans Chrome 6).

  2. 15

    Vous pouvez utiliser le Element.glow([glow]) pour obtenir un effet d'ombre. http://raphaeljs.com/reference.html#Element.glow

  3. 5

    J'ai écrit un plugin qui ajoute une ombre portée à un élément par l'application d'un filtre SVG.
    Il est basé sur le flou plugin.

    Vous pouvez le trouver ici: https://github.com/dahoo/raphael.dropshadow.js

  4. 2

    La façon la plus simple de le faire est simplement de dessiner l'objet avec une ombre de couleur de remplissage, le décalage de quelques pixels, puis dessinez l'objet réel sur le dessus.

    var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);

    Vous pouvez également régler l'opacité de l'attribut si nécessaire.

  5. 0

    Vous pouvez utiliser une lueur d'ajouter des ombres.

    .glow({ color: '#900', width:10, offsetx:5 }) //random example...

    découvrez la la documentation