Отображать градиенты SVG с помощью Flash?

StackOverflow https://stackoverflow.com/questions/340658

Вопрос

Я использую AS3 (Flash) для чтение SVG-файлов и дисплей их.Проблема заключается в правильном отображении линейный / радиальный градиент.

Ниже приведен пример простого линейный градиент От Красный Для Синий, в формате 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>

Я был в состоянии прочитать Цвет из градиента (стили остановки) и их расстояние между через градиент (смещения стопа).

Хорошо, итак, теперь у меня есть приятный градиент с помощью правильные цвета и нужное количество места между ними, но с БЕЗ вращения или масштабирования, и его вне позиции!.

Ответ заключается в том, чтобы накормить a Матрица в функцию градиента вспышки.

Способ 1:Используйте прилагаемую матрицу

В Поставляемая матрица по SVG, gradientTransform="матрица (a,b, c, d, e, f)" кажется фактически бесполезным с тех пор, как вы подаете это матрица в "Флэш" Функция beginGradientFill() beginGradientFill(), он отображает градиент растянутый поверх формы настолько, чтобы был виден только центральный цвет градиента, как при сплошной заливке.

Способ 2:Сгенерируйте матрицу, используя 2 точки градиента

  • В x1, y1 теги могут быть точкой на экране, где градиент начинается с.
  • В x2, y2 теги, могут быть точкой на экране, где градиент заканчивается.

Когда я говорю "2 точки градиента", я имею в виду x1, y1 и x2, y2, которые в основном говорят вам где на фигуре делает ли начало и конец градиента.

Там есть Матрица.createGradientBox() функция который создает матрицу для использования с градиентами, но параметры сильно отличается от того, что такое SVG дает мне.Он хочет:

  1. Ширина --- здесь использовалось относительное расстояние между двумя точками градиента (ось X)
  2. Высота --- здесь использовалось относительное расстояние между двумя точками градиента (ось Y), но получил неверные результаты --- также пробовал использовать расстояние между 2 точками градиента вот, но я не знал, чем заполнить Ширину!
  3. Угол поворота -- использовался угол между двумя точками градиента в радианах, с неверными результатами!
  4. Перевод x -- попробовал 1-ю точку градиента X, также попробовал 0, с неверными результатами!
  5. Перевод y -- попробовал 1-ю точку градиента Y, также попробовал 0, с неверными результатами!

Какие SVG-данные я могу использовать для создания градиентной матрицы для Flash?

(Посмотрите на фрагмент SVG выше, это все имеющиеся у меня данные, описывающие градиент)

Это было полезно?

Решение

Как нарисовать линейный градиент, используя 2 точки градиента

  1. x1, y1 и x2,y2 являются ли 2 точки на координатное пространство экрана, что градиент должен быть нарисован от, до.
  2. Используйте матрица преобразования предоставлено SVG для смещение точек x1, y1 и x2,y2. -- gradientTransform="матрица (a,b, c, d, e, f)
  3. Нарисуйте градиент от x1, y1 к x2, y2.

т. е.

x1, y1, x2, y2 представляют значения в системе координат , которая является результатом использование текущей пользовательской системы координат для элемента ссылка на градиент (через свойство 'заливка' или 'обводка') в момент, когда на элемент градиента делается ссылка, и затем применяем преобразование, указанное атрибутом gradientTransform.

через Документы W3C.

Другие советы

Движок рендеринга SVG!

Может быть, есть какие-то ответы здесь это может помочь.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top