Домашние Картинки разработка веб-сайтов в Челябинске
(351) 777-94-64info@homepictures.ru
/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для MS Internet Explorer/Фильтр LIGHT

Фильтр LIGHT

Фильтр LIGHT

Фильтр light создает впечатление освещения объекта источником света.

Свойства. нет

Методы.

Описание. Этот фильтр наиболее сложный из всех визуальных эффектов, т.к. его настройка требует использования методов и написания сценария (т.к. нет свойств). Кроме того требуется иметь представление о источниках света и геометрии.

Без настройки действует фильтр с источником по умолчанию. Источник по умолчанию, представляющий собой рассеянный источник света (ambient light), заменяется при первом же создании (и добавлении к сцене) любого источника света. Как видно, из описания методов можно создавать источники трех типов, контролировать их положение, позицию светового фокуса, цвет, яркость. Максимально возможное количество источников света для одного фильтра – 10. При необходимости большего включения источников цвета необходимо добавлять большее количество фильтров.

Можно применять фильтр для одного объекта (например, для картинки). Для применения светового эффекта к другому объекту (например, к тексту), надо применять другой фильтр. Однако при "оборачивании" нескольких объектов в "оболочку" (например, в тэг <DIV>), можно применить один эффект ко всем объектам, содержащимся в контейнере.

Для применения методов можно поступить насколькими способами. Наиболее распространенный – переопределение функции-обработчика window.onload или onload тэга <BODY>, вызываемого при загрузке документа, например:

<body onload="init()">
  <script language="javascript">
    function init(){
      //инициализация фильтра: добавление источников цвета и пр.
      ...
      some_object.filters.light.addCone(0,0,10,30,50, 255, 145, 56, 60, 80);
      ...
    }
  </script>
...
<div id=some_object style="...; filter:light(); ...">
  <!--объект, к которому применяется фильтр -->
   ...
</div>
....
</body>

Можно не ждать загрузки всего документа и применять фильтр на лету, например:

<body onload="init()">
...
<div id=some_object style="...; filter:light(); ...">
  <!--объект, к которому применяется фильтр -->
  ...
</div>
<script language="javascript">
  some_object.filters.light.addCone(0,0,10,30,50, 255, 145, 56, 60, 80);
</script>
....
</body>

При этом необходимо не забывать, что для объекта желательно, чтобы был определен индентификатор id, иначе прийдется "добираться" до объекта через различного рода коллекции. Следует также помнить, что тело документа загружается быстрее графических файлов картинок, поэтому при инициализации необходимо проверять состояния загрузки графического файла, иначе фильтр не будет иметь эффекта.

Примеры применения методов, приведенные ниже, показывают особенности задания различных источников света для визуализации объекта.

addAmbient(Red, Green, Blue, Strength)
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100). Она определяется для точки, на которую направлен источник света.

Примеры. для <span id="obj" style="overflow:hidden; width:100px; height:100px; color:yellow; background-color:blue; line-height: 0.5ex; filter:light();"></span>

1. 2.
  1. addAmbient(255, 255, 255, 100) – рассеянный свет 100%-ой яркости;
  2. addAmbient(255, 0, 0, 50) – красный рассеянный свет 50%-ой яркости

addCone(X1, Y1, Z1, X2, Y2, Red, Green, Blue, Strength, Spread)
X1, Y1, Z1 – целые числа, определяющие положение источника направленного света над плоскостью визуального объекта.
X2, Y2 – целые числа, определяющие координаты на плоскости визуального объекта, куда направлен центр конуса источника направленного цвета.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100).
Spread – степень рассеяния светового конуса. Задается в градусах (0..90o), как угол между осью конуса и его образующей. Интенсивность распределяется в области отражения неравномерно. Поэтому для более размытых конусов (угол больше), область отражения больше и отсутствует резкая граница. Менее размытые конусы (угол меньше) имеют меньшую площадь отражения, более четкую границу и более яркое отражение.

Примеры. для <span id="obj" style="overflow:hidden; width:100; height:100; color:yellow; background-color:blue; line-height: 0.5ex; filter:light();"></span>

1. 2. 3. 4.
  1. addCone(25,75,90,25,75, 255, 255, 255, 100, 30) – направленный перпендикулярно поверхности свет; коодинаты x и y для источника и цели совпадают;
  2. addCone(25,75,90,25,75, 255, 255, 255, 100, 70) – величину фокуса можно менять степенью рассеянья;
  3. addCone(25,75,30,25,75, 255, 255, 255, 100, 30) – величину фокуса можно менять также z-координатой источника;
  4. addCone(15,75,25,35,65, 255, 255, 255, 100, 30) – форму фокуса можно менять, сдвигая координаты источника (x,y) относительно координат "приемника";

addPoint(X, Y, Z, Red, Green, Blue, Strength)
X, Y, Z – целые числа, определяющие положение точечного источника над плоскостью визуального объекта.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100). Она определяется для точки, на которую направлен источник света.

Примеры. для <span id="obj" style="overflow:hidden; width:100; height:100; color:yellow; background-color:blue; line-height: 0.5ex; filter:light();"></span>

1. 2.
  1. addPoint(25, 25, 15, 255, 255, 255, 50) – белый точечный источник света 50%-ой интенсивности;
  2. addPoint(25, 25, 90, 255, 0, 0, 100) – более далекий, но более мощный точечный источник красного цвета;

changeColor(LightNumber, Red, Green, Blue, Absolute)
LightNumber – номер источника света, для которого меняется цвет.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Absolute – флаг, показывающий, являются ли составляющие цвета абсолютными значениями и будут замещать текущие цвета (ненулевое значение (true)) или относительными и будут прибавляться к текущим значениям цвета (нуль (false)).

changeStrength(LightNumber, Strength, Absolute)
LightNumber – номер источника света, для которого меняется яркость.
Strength – яркость, которую надо установить.
Absolute – флаг, показывающий, является ли Strength абсолютным значением или относительным.

clear()
Метод не имеет параметров.

moveLight(LightNumber, X, Y, Z, Absolute)
не эффективен для источников рассеяного света (ambient light)
LightNumber – номер источника света, для которого меняются координаты.
X, Y, Z – новые координаты источника света над плоскостью визуального объекта.
Absolute – флаг, показывающий, будет ли движение абсолютным или относительным.

Примечания.

В начало: Создание визуальных эффектов фильтрами и превращениями

Назад: Описание свойств и методов фильтров