Comment créer un objet gradient avec Raphael

je cherchais à utiliser la bibliothèque graphique Raphael JS. Je voudrais utiliser le dégradé d'attribut qui devrait accepter un objet. La documentation dit se référer aux spécifications SVG. J'ai trouvé l'objet gradient dans SVG, par exempleComment créer un objet gradient avec Raphael

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> 
<stop offset="5%" stop-color="red" /> 
<stop offset="95%" stop-color="blue" stop-opacity="0.5" /> 
</linearGradient>

mais comment puis-je faire référence à partir de mon javascript?

circle.attr("gradient", "myFillGrad");

ne fonctionne pas :) Merci à l'avance

Source

2009-02-22 tarella

MISE À JOUR: Réécriture pour la dernière API Raphael:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Linear Gradient</title> 
    <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <script type="text/javascript" charset="utf-8"> 
    var paper = Raphael(10, 10, 800, 600); 
    var circle = paper.circle(150, 150, 150); 
    circle.attr({ 
     "fill": "90-#f00:5-#00f:95", 
     "fill-opacity": 0.5 
    }); 
    </script> 
</body> 
</html>

La documentation de la nouvelle API attr() se trouve here.

Source

2009-02-25 05:46:06

Il ressemble à cette API n'existe plus. Voir http://jsfiddle.net/GuQA6/ pour un cas de test. Vous ne connaissez pas la nouvelle API pour modifier l'opacité des arrêts de couleur, n'est-ce pas? –

J'ai mis à jour l'exemple de code pour refléter la dernière API. Votre meilleur pari à l'avenir est de lire la documentation pour découvrir comment les API ont changé. –

J'ai mis à jour le jsfiddle pour correspondre à l'exemple de code @NathandeVries ... http://jsfiddle.net/GuQA6/155/ juste pour le prochain dev qui veut le voir en action. – scunliffe

Je ne crois pas que l'API actuelle de raphael vous permet de définir les opacités d'arrêt individuels autres que le dernier, qui est donné la valeur passée dans la « opacité » attr, par exemple:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})

... aura une opacité d'arrêt de 0 à son dernier arrêt. Car j'ajouté un contrôle plus fin ce « cas » à l'attribut analyse syntaxique commutateur dans mes Raphael.js:

case "opacityStops": 
          if (attrs.gradient) { 
           var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E)); 
           if (gradient) { 
            var stops = gradient.getElementsByTagName("stop"); 
            var opacs=value.split("-"); 
            for(var ii=0;ii<stops.length;ii++){ 
             stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1"); 
            } 
           } 
           break; 
          }

Vous devez également ajouter une entrée correspondante dans l'objet « availableAttrs », par exemple:

availableAttrs = {<other attrs here>..., opacityStops:"1"}

un appel à créer un cercle avec un dégradé radial avec une opacité différente arrête doit ressembler à:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}

Source

2010-08-30 21:58:41 lafncow

Comment créer un objet gradient avec Raphael

Répondre

Questions connexes