Mostrar gradientes SVG usando Flash?

Question

Estoy usando AS3 (Flash) para leer archivos SVG y mostrarlos . El problema es mostrar correctamente un gradiente lineal / radial.

A continuación se muestra un ejemplo de un gradiente lineal simple de Rojo a Azul , en 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>

He podido leer los colores del gradiente (estilos de stop) y su espaciado a través del gradiente (compensaciones de stop).

Bien, ahora tengo un gradiente agradable con los colores correctos y cantidad correcta de espacio entre ellos, pero con < strong> SIN rotación o escala , y su posición de apagado .

La respuesta es alimentar a < strong> Matrix en la función de degradado de Flash.

---

Método 1: utilice la matriz suministrada

La Matriz suministrada por SVG, gradientTransform = " matrix (a, b, c, d , e, f) " parece ser efectivamente inútil ya que cuando alimenta esa matriz en función beginGradientFill () , muestra el gradiente estirado tanto sobre la forma que solo se ve el color central del degradado, como un relleno sólido.

---

Método 2: generar una matriz utilizando 2 puntos de gradiente

• Las etiquetas x1, y1 pueden ser el punto en la pantalla donde comienza el gradiente .
• Las etiquetas x2, y2 pueden ser el punto en la pantalla donde termina el gradiente .

Cuando digo " 2 puntos de gradiente " ;, me refiero a x1, y1 y x2, y2, que en su mayoría le dicen en qué parte de la forma comienza y amplifica el gradiente ; fin.

Ahí está la Matriz. La función createGradientBox () que crea una matriz para usar con gradientes, pero los parámetros son muy diferentes de lo que SVG me da. Quiere:

1. Ancho --- usó la distancia relativa entre los 2 puntos de gradiente aquí (eje X)
2. Altura --- usó la distancia relativa entre los 2 puntos de gradiente aquí (eje Y), pero obtuvo resultados incorrectos --- también intenté usar el distancia entre los 2 puntos de gradiente aquí, ¡pero no sabía qué llenar en Ancho!
3. Ángulo de rotación : ¡se utilizó el ángulo de los 2 puntos de gradiente, en radianes, con resultados incorrectos!
4. Traducción x - probé la X del primer punto de gradiente, ¡también probé 0, con resultados incorrectos!
5. Traducción y - probé la Y del primer punto de gradiente, ¡también probé 0, con resultados incorrectos!

---

¿Qué datos SVG puedo usar para generar una matriz de gradiente para Flash?

(Mire el fragmento de SVG arriba, esos son todos los datos que describo el gradiente)

Answer 1

Cómo dibujar un degradado lineal utilizando los 2 puntos de degradado

1. x1, y1 y x2, y2 son los 2 puntos en el espacio de coordenadas de la pantalla , desde el que se debe dibujar el gradiente, a.
2. Utilice la matriz de transformación suministrada por SVG para compensar los puntos x1, y1 y x2, y2. - gradientTransform = " matrix (a, b , c, d, e, f)
3. Dibuje el gradiente de x1, y1 a x2, y2.

es decir

  

x1, y1, x2, y2 representan valores en el   sistema de coordenadas que resulta de    tomando el sistema de coordenadas de usuario actual en su lugar para el elemento   haciendo referencia al gradiente (a través de un   propiedad 'fill' o 'stroke') en el   momento en que el elemento degradado es   referenciada, y luego aplicando el   transformación especificada por atributo   gradientTransform.

a través de W3C Docs .

Answer 2

Motor de renderizado SVG!

Tal vez hay algunas respuestas aquí que pueden ayudar.