Exibir gradientes SVG usando o Flash?

Question

Eu estou usando AS3 (Flash) para ler SVG arquivos e visualização -los. O problema é apresentar correctamente uma linear / radial gradiente.

A seguir é um exemplo de uma simples linear gradiente de Red para Blue , em 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>

Eu tenho sido capaz de ler os cores a partir do gradiente (estilos de parada), e sua espaço através do gradiente (offsets de paragem).

Ok, então agora eu tenho um agradável gradiente com cores certas e quantidade certa de espaço entre eles, mas com < strong> rotação NO ou escala , e sua off posição! .

A resposta é alimentar um < strong> Matrix em função gradiente de flash.

---

Método 1: Use o fornecido matriz

O Matrix fornecido por SVG, gradientTransform = "matriz (a, b, c, d, e, f) " parece ser efetivamente inútil já que quando você alimenta que matriz em flash 's beginGradientFill () , ele exibe o gradiente esticado sobre a forma tanto assim apenas a cor central do gradiente é visível, como um preenchimento sólido.

---

Método 2: gerar uma matriz usando 2 pontos gradiente

• O x1, y1 marcas pode ser o ponto na tela onde o gradiente começa em.
• O x2, y2 marcas, pode ser o ponto na tela onde os extremidades gradiente.

Quando digo "2 pontos de gradiente", estou me referindo a x1, y1 e x2, y2, que são na sua maioria dizendo onde na forma faz o início gradiente & final .

Há o Matrix. createGradientBox () função que cria uma matriz para uso com gradientes, mas os parâmetros são muito diferente do que o que SVG me dá. Ele quer:

1. largura --- utilizada a distância relativa entre os 2 pontos de gradiente aqui (eixo X)
2. altura --- utilizada a distância relativa entre os 2 pontos de gradiente aqui (eixo Y), mas obteve resultados incorrectos --- também tentado usando o distância entre os 2 pontos de gradiente aqui, mas eu não sabia o que para preencher a largura!
3. ângulo de rotação - usado o ângulo dos 2 pontos de gradiente, em radianos, com resultados incorretos
4. Tradução x - tentou 1º do ponto de gradiente X, também tentou 0, com resultados incorretos
5. Tradução y - tentou Y 1º do ponto de gradiente, também tentou 0, com resultados incorretos

---

Quais são os dados SVG eu posso usar para gerar um gradiente Matrix para Flash?

(Olhe para o SVG trecho acima, isso é todos os dados que tenho que descrevem o gradiente)

Answer 1

Como desenhar um gradiente linear usando os 2 pontos de gradiente

1. x1, y1 e x2, y2 são os 2 pontos no tela espaço de coordenadas , que o gradiente é para ser extraída, para.
2. Use o transformação de matriz fornecido pelo SVG para compensar a x1, y1 e x2, pontos y2 -. gradientTransform = "matriz (a, b, c, d, e, f)
3. Desenhe o gradiente de x1, y1 para x2, y2.

i.

x1, y1, x2, y2 representam valores na sistema de coordenadas que resulta da levando o usuário atual sistema de coordenadas no lugar para o elemento referenciar o gradiente (através de um 'Preenchimento' ou 'derrame' propriedade) no altura em que o elemento é gradiente referenciada, e em seguida, aplicar o transformada especificado pelo atributo gradientTransform.

W3C Docs .

Answer 2

SVG motor de renderização!

Talvez existam algumas respostas aqui que podem ajudar.