Afficher les dégradés SVG avec Flash?

Question

J'utilise AS3 (Flash) pour lire les fichiers SVG et les afficher . Le problème affiche correctement un dégradé linéaire / radial.

Voici un exemple de dégradé linéaire simple , du rouge au bleu , 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>

J'ai pu lire les couleurs dans le dégradé (styles des arrêts) et leur espacement dans le dégradé (décalages d'arrêt).

D'accord, j'ai maintenant un joli dégradé avec les couleurs correctes et le volume suffisant entre eux, mais avec < strong> AUCUNE rotation ou échelle et sa position désactivée! .

La réponse est de nourrir a strong> Matrice dans la fonction de dégradé de Flash.

Méthode 1: utilisez la matrice fournie

Le Matrice fournie par SVG, gradientTransform = & matrice; (a, b, c, d , e, f) " " semble être réellement inutile, car lorsque vous insérez cette matrice dans Flash Fonction beginGradientFill () , il affiche le dégradé étiré sur la forme, si bien que seule la couleur centrale du dégradé est visible, comme un remplissage plein.

Méthode 2: générer une matrice à l'aide de 2 points de dégradé

• Les balises x1, y1 peuvent être le point à l'écran où le dégradé commence à.
• Les balises x2, y2 peuvent être le point à l'écran où se termine le dégradé .

Lorsque je dis "2 points de dégradé", je fais référence à x1, y1 et x2, y2, qui vous indiquent principalement où se trouve la forme du début et de la sortie du dégradé ; fin.

Il existe le Matrice. La fonction createGradientBox () crée une matrice à utiliser avec les dégradés, mais les paramètres sont très différents de ce que SVG me donne. Il veut:

1. Largeur : utilisez la distance relative entre les 2 points de dégradé ici (axe des X)
2. Hauteur - a utilisé la distance relative entre les 2 points de gradient ici (axe des Y), mais a obtenu des résultats incorrects --- a également essayé d'utiliser le la distance entre les 2 points de dégradé ici, mais je ne savais pas quoi remplir dans la largeur!
3. Angle de rotation : utilisez l'angle des 2 points de dégradé, en radians, avec des résultats incorrects!
4. Translation x - a essayé le X du premier point de dégradé, mais également le 0, avec des résultats incorrects!
5. Traduction y - a essayé le Y du premier point de gradient, mais aussi le 0, avec des résultats incorrects!

Quelles données SVG puis-je utiliser pour générer une matrice à gradient pour Flash?

(Regardez l'extrait SVG ci-dessus, c'est toutes les données dont je dispose pour décrire le dégradé)

Answer 1

Comment dessiner un dégradé linéaire en utilisant les 2 points de dégradé

1. x1, y1 et x2, y2 sont les 2 points de l'espace de coordonnées de l'écran , à partir desquels le dégradé doit être tracé.
2. Utilisez la matrice de transformation fournie par SVG pour décaler les points x1, y1 et x2, y2. - gradientTransform = "matrice (a, b , c, d, e, f)
3. Dessinez le dégradé de x1, y1 à x2, y2.

c'est-à-dire

  

x1, y1, x2, y2 représentent des valeurs dans le   système de coordonnées résultant de    mise en place du système de coordonnées utilisateur actuel pour l'élément   référençant le dégradé (via un   'remplir' ou 'accident vasculaire cérébral') à la   moment où l'élément de dégradé est   référencé, puis appliquant la   transformation spécifiée par attribut   gradientTransform.

via Documents W3C .

Answer 2

Moteur de rendu SVG!

Peut-être y at-il des réponses ici qui peuvent aider.