Wie erstellt man ein Farbverlaufsobjekt mit Raphael

Ich habe versucht, Raphael JS Grafikbibliothek zu verwenden. Ich möchte den Attributgradienten verwenden, der ein Objekt akzeptieren soll. Die Dokumentation sagt, dass sie sich auf SVG-Spezifikationen bezieht. Ich habe das Gradientenobjekt in SVG gefunden, zum BeispielWie erstellt man ein Farbverlaufsobjekt mit 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>

aber wie kann ich das in meinem Javascript referenzieren?

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

nicht funktioniert :) Vielen Dank im Voraus

Quelle

2009-02-22 tarella

UPDATE: für die neueste API Raphael Rewritten:

<!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>

Die Dokumentation für die neuen attr() API gefunden here.

Quelle

2009-02-25 05:46:06

Es sieht aus wie diese API nicht mehr existiert. Siehe http://jsfiddle.net/GuQA6/ für einen Testfall. Sie kennen nicht die neue API zum Ändern der Deckkraft von Farbstopps, oder? –

Ich habe das Codebeispiel aktualisiert, um die neueste API wiederzugeben. In der Zukunft sollten Sie die Dokumentation lesen, um herauszufinden, wie sich die APIs geändert haben. –

Ich aktualisierte die jsfiddle, um @NathandeVries Codebeispiel zu entsprechen ... http://jsfiddle.net/GuQA6/155/ nur für den nächsten Entwickler, der es in Aktion sehen möchte. – scunliffe

Ich glaube nicht, das aktuelle raphael API ermöglicht es Ihnen, die einzelnen Stopp Trübungen andere als die letzte zu setzen, die den Wert in attr auf die „Undurchsichtigkeit“ bestanden gegeben ist, zum Beispiel:

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

... wird an seinem letzten Stopp eine Stopp-Opazität von 0 haben. Für eine feinere Auswahl habe ich diesen „Fall“ auf das Attribut Parsen Schalter in meinem 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; 
          }

Sie müssen auch einen entsprechenden Eintrag in den „availableAttrs“ Objekt hinzufügen, zum Beispiel:

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

ein Anruf einen Kreis mit einem radialen Verlauf mit unterschiedlicher Opazität erstellen aufhört würde wie dann aussehen:

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

Quelle

2010-08-30 21:58:41 lafncow

Wie erstellt man ein Farbverlaufsobjekt mit Raphael

Antwort

Verwandte Themen