Come creare un oggetto sfumato con Raphael

Stavo cercando di utilizzare la libreria grafica Raphael JS. Vorrei usare il gradiente di attributo che dovrebbe accettare un oggetto. La documentazione dice di fare riferimento alle specifiche SVG. Ho trovato l'oggetto pendenza in SVG, per esempioCome creare un oggetto sfumato con 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>

ma come posso riferire che da dentro il mio javascript?

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

non funziona :) Grazie in anticipo

fonte

2009-02-22 tarella

UPDATE: riscritto per l'ultima Raphael API:

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

si trova la documentazione per la nuova API attr()here.

fonte

2009-02-25 05:46:06

sembra che questa API non esiste più. Vedi http://jsfiddle.net/GuQA6/ per un test case. Non si conosce la nuova API per alterare l'opacità delle interruzioni di colore, vero? –

Ho aggiornato l'esempio di codice per riflettere l'ultima API. La tua migliore scommessa in futuro è leggere la documentazione per scoprire come sono cambiate le API. –

Ho aggiornato il jsfiddle in modo che corrisponda al campione di codice @NathandeVries ... http://jsfiddle.net/GuQA6/155/ solo per il prossimo sviluppatore che vuole vederlo in azione. – scunliffe

Non credo l'attuale API Raphael consente di impostare le singole opacità di arresto diversi da quello ultimo, che è dato il valore passato alla "opacità" attr, ad esempio:

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

... avrà una opacità di stop pari a 0 al suo ultimo arresto. Per un controllo più dettagliato ho aggiunto questo "caso" per l'attributo parsing interruttore nei miei Raphaël.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; 
          }

È inoltre necessario aggiungere una voce corrispondente nella sezione "availableAttrs" oggetto, ad esempio:

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

una chiamata a creare un cerchio con un gradiente radiale con diverse opacità smette sarebbe quindi simile:

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

fonte

2010-08-30 21:58:41 lafncow

Come creare un oggetto sfumato con Raphael

risposta

Problemi correlati