Jak utworzyć gradient obiektu za pomocą Raphaela

Próbowałem użyć biblioteki graficznej Raphael JS. Chciałbym użyć gradientu atrybutu, który powinien akceptować obiekt. Dokumentacja mówi, aby odnieść się do specyfikacji SVG. Znalazłem obiekt gradientu w SVG, na przykład:Jak utworzyć gradient obiektu za pomocą Raphaela

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

, ale jak mogę się do tego odwołać z mojego javascript?

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

nie działa :) góry dziękuję

Źródło

2009-02-22 tarella

UPDATE: przepisany dla najnowszego 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>

Dokumentacja dla nowego API znajduje attr()here.

Źródło

2009-02-25 05:46:06

wygląda na to API już nie istnieje. Zobacz http://jsfiddle.net/GuQA6/ dla przypadku testowego. Nie znasz nowego interfejsu API do zmiany przezroczystości kolorów, prawda? –

Zaktualizowałem próbkę kodu tak, aby odzwierciedlała najnowszy interfejs API. Najlepszym wyjściem w przyszłości będzie przeczytanie dokumentacji, aby dowiedzieć się, jak zmieniły się interfejsy API. –

Zaktualizowałem jsfiddle, aby dopasować przykładowy kod @NathandeVries ... http://jsfiddle.net/GuQA6/155/ tylko dla następnego dev, który chce zobaczyć to w akcji. – scunliffe

Nie wierzę obecny Raphael API pozwala ustawić poszczególne zacienienia zatrzymania innych niż ostatni, co jest podane wartości przekazanej w do „zadymienia” attr, na przykład:

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

... będzie mieć stop-krycie 0 na swoim ostatnim przystanku. Dla zwiększenia precyzji drobnoziarnisty dodałam ten „przypadek” do atrybutu parsowania przełącznik w moich 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; 
          }

Musisz również dodać odpowiedni wpis w „availableAttrs” obiektu, na przykład:

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

wezwanie do utworzenia okręgu z gradientu radialnego o różnej nieprzezroczystości przestaje będzie wtedy wyglądać tak:

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

Źródło

2010-08-30 21:58:41 lafncow

Jak utworzyć gradient obiektu za pomocą Raphaela

Odpowiedz

Powiązane problemy