Фильтры статич и динамич
.pdfВизуальные эффекты с использованием фильтров
Разнообразные мультимедийные эффекты можно получить, если применить к элементам страницы фильтры или осуществить переход от одного визуального состояния к другому. Фильтры поддерживаются обозревателями Internet Explorer версий 4.0 и выше. Фильтры разделяются на статические и динамические. Статический фильтр преобразует элемент, который затем отображается в "отфильтрованном" виде. Динамический фильтр или переход меняет визуальное отображение элемента на странице, создавая анимационный эффект. Фильтры применимы не ко всем объектам страницы, а к некоторым объектам фильтры могут быть применены вообще только при соблюдении определенных правил. К элементам body, img, input, table, td, th, textarea фильтры применяются всегда. К элементам div и span фильтры можно применить в том случае, если элемент абсолютно позиционирован или если в параметре style указаны ширина и высота элемента.
Фильтры нельзя применять к любому заголовку, к элементам iframe, select, option, p, em. Фильтры задаются в параметре style тех тегов, к которым они применяются, в следующем виде: Filter: имя_фильтра (параметры)
Фильтры могут не иметь параметров, но в этом случае круглые скобки обязательно должны присутствовать. Некоторые фильтры имеют несколько параметров. Параметры перечисляются через запятую. Для каждого параметра указываются имя, знак равенства и значение.
Многие фильтры можно применить как к тексту, так и к изображениям. К одному элементу можно применить сразу несколько фильтров.
Применение фильтров к тексту
Для того чтобы текст сделать объемным, к нему можно применить фильтр shadow (тень). Он имеет два параметра. Параметр color определяет цвет тени, его значение задается либо в шестнадцатиричном виде, либо с помощью зарезервированных идентификаторов для цвета. Значение параметра direction является числом и задает угол поворота в градусах.
Объемное изображение можно задать и с помощью фильтра dropshadow (отброшенная тень). В этом случае за объектом появляется его силуэт. Параметр color, как и в предыдущем случае, задает цвет тени. Следующие два параметра – offx и offy – задают смещение силуэта по горизонтали и вертикали, соответственно. Если оба значения положительны, смещение осуществляется вправо и вниз, а если оба значения отрицательны – влево и вверх.
Если мы хотим создать вокруг объекта светящийся ореол, следует применить к объекту фильтр glow (свечение). Цвет светящегося контура задается параметром color. Второй параметр strength определяет интенсивность или ширину свечения в пикселах.
<html>
<head><title> Фильтры shadow, dropshadow, glow </title> </head>
<body>
<div style="font-size: 50; color: red; width=100; height=70; filter: shadow(color='blue', direction=100);"> Диана</div> <P>
Диана почиталась как богиня охоты, владычица зверей. В произведениях искусства Диана ча-ще всего предстает вооруженной луком со стрелами, в сопровождении собак или лани.
</р>
<div style="font-size:50; color:red; width:100; height:70;
filter: dropshadow (color=' blue', offx=5, offy=5) ; ">Гермес</div>
<p> Гермес - вестник богов, проводник душ умерших в подземное царство Аида, а также хитрый и изворотливый покровитель торговли. Иногда Гермес почитался и как покровитель искусства.</р> <div style="font-size:50; соlor:blue; width=100; height=70; filter:glow(color='red',strength=5);">Aмyp</div>
<p> Амур - крылатый бог любви, сын Венеры, ее посланник и неизменный спутник. Стрелы Амура, пронзая сердца богов и людей, пробуждали любовь.</р>
</body></html>
1
Рис. 12.1. Применение к тексту фильтров shadow, dropshadow, glow.
Прозрачные области и размытые изображения
К тексту или изображению можно применить фильтр mask. Его единственный параметр color задает цвет, которым заливаются прозрачные области. Непрозрачные пиксели объекта, к которому, применяется фильтр, заливаются белым цветом.
Фильтр blur позволяет представить объект "размытым" в указанном направлении на заданную глубину. Параметр direction определяет направление, параметр strength – интенсивность "размытия" в пикселах. Параметр add позволяет добавлять (значение true) или не добавлять (значение false) исходное изображение объекта в отфильтрованный образ.
Волновое искажение объекта
Более сложный фильтр wave () позволяет добавлять волновое искажение к объекту. Параметр add добавляет или нет исходный объект в отфильтрованный образ. Параметр strength задает интенсивность искажения. Свойство free определяет количество пиков волны, параметр phase задается в процентах от фазы обычной синусоиды, имеющей начальное значение ноль. И наконец, интенсивность освещения определяется значением параметра ligbtstrengtb. Следует быть внимательным при применении этого фильтра, чтобы деформация текста не повлияла на другие его характеристики.
2
Рис.12.2. Применение фильтров mask, blur, wave
<html>
<head><title> Фильтры mask, blur, wave </title> <body>
<div style="font-size: 40; color:blue; width: 70; height: 60; filter:mask (color=red) ; ">Афродита</div>
<p> B античной мифологии Афродита — богиня любви и красоты, покровительница брака. Во многих мифах Афродита воспевалась как богиня плодородия, дарующая жизнь растительному и животному миру.</р>
<div style="font-size:50; color:blue; width=70; height=70;
filter: blur (add=1, direction=-120, strength=10) ; ">Апполон</div>
<р>Аполлон — один из самых почитаемых богов греческого Пантеона: бог света, солнца, предсказатель судеб, покровитель искусства, предводитель муз.</р>
<div style="forit-size: 50; color:blue; width=100; height=70; filter:wave( add=1, Freq=3, Phase=25, lightstrength=15, Strength=15);"> Гера </div>
<p>B античной мифологии Гера — супруга Зевса, главная среди богиньОлимпа, покровительница брака и семьи. В произведениях искусства богиня Гера изображалась в диадеме, со скипетром, часто с символом звездного неба — павлином.</р>
3
</body>
</html>
Зеркальное отображение объектов
Для того чтобы создать зеркальное отображение, можно воспользоваться фильтрами fliph и flipv. Фильтр fliph создает зеркальное отображение объекта в горизонтальном направлении, фильтр flipv — зеркальное отображение объекта в вертикальном направлении. Эти фильтры не имеют параметров.
На рис. 12.3 в документе одно из изображений сделано без применения фильтра, другое – с применением одного из описанных фильтров.
<html>
<head><title> Фильтры fliph, fiipv </title> </head>
<body>
<h4> Зеркальное отображение в горизонтальном направлении </h4> <img src="paris.gif" width=150 >
<img src=" paris.gif " width=150 style="filter: fliph();"> <hr>
<h4> Зеркальное отображение в вертикальном направлении </h4>
<div style="font-size:30; color:blue; width=50; height=40;">Нарцисс </div> <div style="font-size:30; color: blue; width=50; height=40;
filter: flipv();">Нарцисс</div> </body>
</html>
4
Эффект прозрачности изображения
Для создания эффекта прозрачности всего изображения или его отдельных частей рекомендуется воспользоваться фильтром alpha. Параметр opacity определяет степень прозрачности в процентах и может принимать целое значение от 0 до 100. Параметр style определяет способ применения фильтра и может принимать одно из значений 0, 1, 2 или 3. Если значение равно нулю, фильтр применяется равномерно по всему изображению. Более никаких дополнительных параметров не требуется. Если значение параметра style равно 1, прозрачность изображения изменяется вдоль отрезка прямой, заданной координатами начала и конца. При значении style, равном 2, прозрачность изменяется от центра эллипса, вписанного в границы, до краев. При значении style, равном 3, прозрачность изменяется от центра изображения до его краев. Описанные четыре варианта применения фильтра с разными значениями параметра style показаны на рис. 12.4.
Рис. 12.4. Пример применения фильтра alpha
<html>
<head><title> Применение фильтра alpha </title> <style>
div {font-size:20;text-align:center; color:blue; width:20; height:20} td {text-align: center; }
</style>
</head>
<body>
<table border=3> <tr> <td>
<div> Фейерверк
<img src=firewks2.jpg style="filter:alpha(opacity=70,style=0);"> </div></td>
<td>
<div> Фейерверк
<img src=firewks2.jpg style="filter:alpha(opacity=70,style=2);"> </div></td>
</tr>
<tr><td>
<div> Фейерверк
<img src=firewks2.jpg style="filter:alpha(opacity=70,style=3);"></div><td> <div> Фейерверк
5
<img src=firewks2.jpg style="fliter: alpha(opacity=70, style=1, startx=1, starty=1, finichx=100, finichy=100> ;"> </div></td></tr> </table></body></html>
Прозрачные цвета
Фильтр chroma делает прозрачными все пикселы указанного цвета. Единственный параметр этого фильтра color задает цвет, который следует заменить на прозрачный. Для того чтобы ярче увидеть полученный эффект, можно изображение задать на слое определенного цвета, что и сделано в документе, приведенном на рис. 12.5.
<html>
<head><title>Применение фильтра chroma </title> <style>
div {font-size:20; color:white; background:blue; width: 120; height: 120;} td {text-align: center}
</style>
</head>
<body>
<table>
<tr><td><div>Прогноз погоды <img src=paris.gif></div></td> <td><div>Прогноз погоды
<img src=paris.gif style="filter: chroma (color='white');"> </div></td></tr></table></body></html>
Преобразование цветного изображения
Фильтр gray преобразует цветное изображение в черно-белое. Этот фильтр не имеет параметров. Фильтр хгау также преобразует цветное изображение в черно-белое, но дополнительно меняет это изображение на негативное. Негативное цветное изображение можно получить, применив к изображению фильтр invert. На рис. 12.6 показаны три изображения, к каждому из которых применен тот или иной фильтр.
При щелчке на любом из приведенных изображений действия фильтра отменяются и изображение представляется на странице в исходном, неотфильтрованном виде. Каждый фильтр имеет свойство enabled, которое разрешает (значение true) или запрещает (значение false) применение фильтра. В рассмотренном случае реакцией на щелчок мышью по изображению является запрещение использования фильтра.
6
<html>
<head><title> Фильтры gray, xray, invert </title> <style>
div {font-size: 10; text-align:center; color:red; background:white} </style>
</head>
<body bgcolor=silver>
<h4> Фильтры gray, xray, invert </h4> <table border=3>
<tr>
<td>
<div><h5> Изображение без фильтра </h5> <img id="p0" src=paris.gif width=150>
</div>
</td>
<td>
<div><h5> Применен фильтр gray </h5>
<img id="p1" src=paris.gif width=150 style="filter: gray();" onclick="p1.filters['gray'].enabled=0">
</div>
</td>
</tr>
7
<tr>
<td>
<div><h5> Применен фильтр xray </h5>
<img id="p2" src=paris.gif width=150 style="filter: xray();" onclick="p2.filters [ 'xray' ] .enabled=0">
</div>
</td>
<td>
<div><h5> Применен фильтр invert </h5>
<img id="p3" src=paris.gif width=150 style="fliter:invert();" onclick="p3.filters['invert'].enabled=0">
</div>
</td>
</tr></table></body></html>
Добавление к изображению источников света
Назначение фильтра light состоит в том, чтобы "подсветить" объект. Фильтр имеет единственное свойство enabled. Методы фильтра light позволяют добавлять к изображению объекта разные источники света. При применении фильтра light к изображению на странице располагается прямоугольник черного цвета. Чтобы "увидеть" объект, к нему добавляют источники света. Метод addAmbient помещает рассеянный источник света над изображением. Параметрами метода являются три составляющие света (красная, зеленая и синяя), каждая из которых принимает одно из значений из диапазона 0—255. Четвертый параметр определяет интенсивность источника.
Добавить канонический источник света (прожектор) можно с помощью метода addCone, имеющего десять параметров. Первые два параметра определяют координаты х и Y точки, откуда исходит свет. Третий параметр задает номер слоя. Далее задаются координаты х и Y точки, в которую направляется источник, следующие три параметра определяют составляющие интенсивности в формате RGB. Следующий параметр задает интенсивность эффекта. И наконец, последний параметр задает величину угла конуса. Последний параметр определяет ширину освещенной полосы (прожектор).
Способ addPoint добавляет точечный источник света. Первые два параметра определяют координаты источника, следующий параметр задает номер слоя, далее три параметра определяют цвета RGB, последний параметр задает интенсивность фильтра. Этот метод применяется в сценариях совместно с другими методами.
На рис. 12.7 показаны изображения после применения к ним фильтра light. В первом случае задается рассеянный источник света, во втором — конический.
Рис. 12.7. Пример применения фильтра light
8
<html>
<head><title> Применение к изображению фильтра light </title> <script>
function TestFiltres1() {p1.filters.light.addAmbient (225, 250, 20, 250) } function TestFiltres2 ()
{p2.filters.light.addCone(10,30,1,300,250,250,250,250,20,30)}
</script>
</head>
<body onload="TestFiltres1(); TestFiltres2(); ">
<img id= p1 src=firewks2.jpg width=200 style="filter:light();"> <img id= p2 src=firewks2.jpg width=200 style="filter:light();"> </body></html>
Приведем список статических фильтров с параметрами и описанием
Статические фильтры
Фильтр |
Параметры |
|
Описание |
alpha |
opacity, finish opacity, |
style, |
Задает постоянный уровень прозрачности |
|
snarntx, startY, finfishX, finichY |
|
|
blur |
add, direction, strength |
|
Создает эффект движения |
chroma |
color |
|
Создает одноцветный транспарант |
flich |
|
|
Горизонтальное отражение |
flicv |
|
|
Вертикальное отражение |
dropshadow |
color, offx, offy, positiv |
|
Обводит силуэт объекта |
glow |
color, strength |
|
Создает эффект свечения |
gray |
|
|
Преобразует объект в черно-белый |
invert |
|
|
Инвертирует цвета, оттенки и яркость |
light |
|
|
Освещает объект от источника |
mask |
color |
|
Делает из объекта транспарантмаску |
shadow |
color, direction |
|
Создает силуэт объекта отдельно от объек- |
|
|
|
та |
wave |
add, free, lightstrength, |
phase, |
|
|
strength |
|
|
xray |
|
|
Показывает только контур объекта |
9
Динамические фильтры (переходы)
Динамические фильтры или переходы позволяют определять переход от одного визуального эффекта к другому, задавая как тип эффекта, так и его продолжительность или длительность. Переходы используются для задания интересных анимационных эффектов.
Переход blendTrans задает постепенное проявление или исчезновение объекта путем изменения его прозрачности. Параметр duraction указывает время в секундах, в течение которого осуществляется переход. Параметр status позволяет определить и изменить состояние перехода на момент выполнения сценария. Доступ к этому параметру может быть осуществлен только из сценария. Параметр может принимать три значения. Если значение параметра status равно нулю, то либо выполнение перехода еще не началось, либо переход остановлен. Если значение равно 1, применение перехода закончилось. Значение параметра равно 2, соответствует тому, что переход находится в стадии выполнения.
Управлять переходами можно из сценариев, используя методы. Метод apply() позволяет изменить значения параметров перехода и самого элемента. Метод play() используется для выполнения перехода. Третий метод stop() позволяет остановить выполнение перехода. После щелчка мышью по изображению оно начинает растворяться, исчезая совсем.
Рис. 12.8. Пример использования фильтра blendTrans
<html>
<head>
<title> Фильтр blendTrans </title> <script>
function myTestTrans1()
{ p1.filters.blendTrans.apply (); p1.filters.blendTrans.play(); p1.style.visibility="hidden" } </script>
</head>
<body> <h5> Изображение исчезает после щелчка мыши по нему </h5>
<img src="firewks1.jpg" id="p1" style="filter: blendTrans (duration=50);" onclick='myTestTrans1()'> </body> </htmI>
10