Visualizzare i gradienti SVG usando Flash?

Question

Sto utilizzando AS3 (Flash) per leggere file SVG e visualizzarli . Il problema sta visualizzando correttamente un gradiente lineare / radiale.

Di seguito è riportato un esempio di semplice gradiente lineare da Rosso a Blu , in SVG.

<linearGradient id="GRADIENT_1" gradientUnits="userSpaceOnUse"
x1="107.3938" y1="515.5684" x2="105.2488" y2="428.8614"
gradientTransform="matrix(0.9988 0.0485 0.0485 -0.9988 0.8489 711.6634)">

    <stop  offset="0" style="stop-color:red"/>
    <stop  offset="1" style="stop-color:blue"/>

</linearGradient>

Sono stato in grado di leggere i colori dal gradiente (stili dello stop) e la loro spaziatura attraverso il gradiente (offset dello stop).

Va ??bene, quindi ora ho un gradiente gradevole con i colori giusti e spazio giusto tra loro, ma con < forte> NESSUNA rotazione o scala e la sua posizione off! .

La risposta è alimentare a < strong> Matrix nella funzione di sfumatura di Flash.

---

Metodo 1: utilizzare la matrice fornita

La Matrix fornita da SVG, gradientTransform = " matrix (a, b, c, d , e, f) " sembra essere effettivamente inutile da quando inserisci quella matrice in beginGradientFill () funzione , visualizza il gradiente allungato / strong> sulla forma così tanto che solo il colore centrale della sfumatura è visibile, come un riempimento solido.

---

Metodo 2: genera una matrice usando 2 punti gradiente

• I tag x1, y1 potrebbero essere il punto sullo schermo in cui inizia il gradiente.
• I tag x2, y2 potrebbero essere il punto sullo schermo in cui termina il gradiente.

Quando dico " 2 punti gradiente " ;, mi riferisco a x1, y1 e x2, y2, che ti dicono principalmente dove sulla forma fa il inizio e ampli del gradiente ; fine.

C'è la Matrix. Funzione createGradientBox () che crea una matrice da utilizzare con i gradienti, ma i parametri sono molto diversi da quello che mi dà SVG . Vuole:

1. Larghezza --- ha utilizzato la distanza relativa tra i 2 punti di gradiente (asse X)
2. Altezza --- ha usato la distanza relativa tra i 2 punti gradiente qui (asse Y), ma ha ottenuto risultati errati --- ha anche provato a usare distanza tra i 2 punti gradiente qui, ma non sapevo cosa riempire in Larghezza!
3. Angolo di rotazione : utilizzato l'angolo dei 2 punti di gradiente, in radianti, con risultati errati!
4. Traduzione x - ho provato la X del 1 ° gradiente, ho anche provato 0, con risultati errati!
5. Traduzione y - ho provato la Y del 1 ° gradiente, ho anche provato 0, con risultati errati!

---

Quali dati SVG posso usare per generare una matrice gradiente per Flash?

(guarda lo snippet SVG sopra, sono tutti i dati che ho che descrivono il gradiente)

Answer 1

Come disegnare un gradiente lineare usando i 2 punti gradiente

1. x1, y1 e x2, y2 sono i 2 punti nello spazio delle coordinate dello schermo , da cui deve essere disegnato il gradiente da, a.
2. Utilizza la matrice di trasformazione fornita da SVG per compensare i punti x1, y1 e x2, y2. - gradienteTransform = " matrice (a, b , c, d, e, f)
3. Disegna il gradiente da x1, y1 a x2, y2.

cioè.

  

x1, y1, x2, y2 rappresentano i valori in   sistema di coordinate che risulta da    mettendo in atto l'attuale sistema di coordinate dell'utente per l'elemento   facendo riferimento al gradiente (tramite a   proprietà "riempimento" o "tratto") in corrispondenza di   tempo in cui l'elemento gradiente è   referenziato e quindi applicando il   trasformazione specificata dall'attributo   gradientTransform.

via W3C Docs .

Answer 2

motore di rendering SVG!

Forse ci sono alcune risposte qui che possono aiutarti.