Фильтр light создает впечатление освещения объекта источником света.
Свойства. нет
Методы.
addAmbient
добавляет источник рассеянного света к "сцене" фильтра.addCone
добавляет источник конического света (cone light) к "сцене" фильтра, который обрасывает направленный цвет на сцену (направленный источник).addPoint
добавляет источник света, который позиционирован (заданы координаты) и излучает во все направления (точечный источник).changeColor
меняет цвет любого источника в сценеchangeStrength
изменяет яркость света.clear
удаляет все источники света для сцены фильтра.moveLight
передвигает источник света для сцены фильтра.Описание. Этот фильтр наиболее сложный из всех визуальных эффектов, т.к. его настройка требует использования методов и написания сценария (т.к. нет свойств). Кроме того требуется иметь представление о источниках света и геометрии.
Без настройки действует фильтр с источником по умолчанию. Источник по умолчанию, представляющий собой рассеянный источник света (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>
addAmbient(255, 255, 255, 100)
рассеянный свет 100%-ой яркости;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>
addCone(25,75,90,25,75, 255, 255, 255, 100, 30)
направленный перпендикулярно поверхности свет; коодинаты x и y для источника и цели совпадают;
addCone(25,75,90,25,75, 255, 255, 255, 100, 70)
величину фокуса можно менять степенью рассеянья;
addCone(25,75,30,25,75, 255, 255, 255, 100, 30)
величину фокуса можно менять также z-координатой источника;
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>
addPoint(25, 25, 15, 255, 255, 255, 50)
белый точечный источник света 50%-ой интенсивности;
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
флаг, показывающий, будет ли движение абсолютным или относительным.
Примечания.
В начало: Создание визуальных эффектов фильтрами и превращениями
Назад: Описание свойств и методов фильтров