Отображать градиенты SVG с помощью Flash? - PullRequest
Новая
       19

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

2 голосов
/ 04 декабря 2008

Я использую 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 Matrix в функцию градиента Flash.

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

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

Метод 2. Создание матрицы с использованием 2 точек градиента

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

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

Есть Matrix.createGradientBox () функция , которая создает матрицу для использования с градиентами, но параметры очень отличаются от тех, что дает мне SVG . Хочет:

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

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

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

Ответы [ 2 ]

1 голос
/ 06 декабря 2008

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

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

* * т.е. тысяча двадцать-один * ** 1 022 * тысяча двадцать три

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

через W3C Docs .

0 голосов
/ 05 декабря 2008

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

Может быть, есть некоторые ответы здесь , которые могут помочь.

...