Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1482 / 125 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Специальности: Программист
Лекция 8:

Фильтры. Часть II

< Лекция 7 || Лекция 8: 12345 || Лекция 9 >
Аннотация: Фильтры feFlood, feOffset, feMorphology, feDisplacementMap, feTile.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

feFlood

Фильтр позволяет тонировать изображение заданным цветом с произвольной степенью прозрачности. Структура этого фильтра выглядит следующим образом (рис. 8.1):

Структура фильтра feFlood

увеличить изображение
Рис. 8.1. Структура фильтра feFlood

Атрибуты flood-color отвечает за цвет тонировки. Как всегда, по умолчанию принимается черный цвет. Значения атрибут flood-opacity находятся в диапазоне от 0 до 1 (0 – полная прозрачность). Для комбинации изображений используется фильтр feComposite. В табл. 8.1 приводятся примеры использования этого фильтра.

Таблица 8.1. Фильтр feFlood.
Код Вид в браузере
8.1.1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 8. Фильтры. Часть II</title>
     <desc>
          Пример feFlood1svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
         x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<image id="MyImage1" x="10" y="10" 
       width="186" height="125" xlink:href="sea1.jpg"/>


</defs>

<rect x="10" y="10" width="186" height="125" 
     filter="url(#myFilter)"/>

<!--Вспомогательные изображения-->
<image x="10" y="155" width="186" height="125" 
       xlink:href="sea1.jpg"/>
<rect x="10" y="300" width="186" height="125" 
      fill="red" fill-opacity="0.3"/>

</svg>
Листинг 8.1.1. Пример feFlood1svg
Описание
Композиция, состоящая из красного прямоугольника (с прозрачностью 0.3) и исходного изображения.
Код Вид в браузере
8.1.2
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 8. Фильтры. Часть II</title>
     <desc>
          Пример feFlood2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
         x="10" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
         
         x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.6' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
         
         x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.9' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>


</defs>

<rect x="10" y="10" width="186" height="125" 
     filter="url(#myFilter1)"/>
<rect x="10" y="155" width="186" height="125" 
     filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125" 
     filter="url(#myFilter3)"/>

</svg>
Листинг 8.1.2. Пример feFlood2.svg
Описание
Примеры различной прозрачности. Все остальные атрибуты одинаковы.
Код Описание
8.1.3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 8. Фильтры. Часть II</title>
     <desc>
          Пример feFlood3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
         
         x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
         
         x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="green" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
         x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="blue" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
         x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="yellow" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
         x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="magenta" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
     filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
     filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
     filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
     filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
     filter="url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea1.jpg"/>

</svg>
Листинг 8.1.3. Пример feFlood3.svg
Примеры композиций, содержащих различные цвета. Все остальные атрибуты одинаковы.
Вид в браузере
Код Описание
8.1.4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 8. Фильтры. Часть II</title>
     <desc>
          Пример feFlood4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
         x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
         x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0" k2="1" k3="0" k4="0"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
         x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0" k2="0" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
         x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="1" k2="1" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
         x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0" k2="0.5" k3="0.5" k4="0"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
     filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
     filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
     filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
     filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
     filter="url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea1.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
       sea1.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       k1="0.4" k2="0.4" k3="1" k4="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       k1="0" k2="1" k3="0" k4="0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       k1="0" k2="0" k3="1" k4="0"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       k1="1" k2="1" k3="1" k4="0"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       k1="0" k2="0.5" k3="0.5" k4="0"</text>

</svg>
Листинг 8.1.4. Пример feFlood4.svg
Граничные значения атрибутов k1, k2, k3, k4 фильтра feComposite.
Вид в браузере
Код Описание
8.1.5
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 8. Фильтры. Часть II</title>
     <desc>
          Пример feFlood5.svg
     </desc>

<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse" 
         x="10" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
         x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="over"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
         x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="in"/>
</filter>


<filter id="myFilter4" filterUnits="userSpaceOnUse" 
         x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="out"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
         x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="atop"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
         x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' 
         result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="xor"/>
</filter>


</defs>
<rect x="10" y="10" width="186" height="125" 
     filter="url(#myFilter1)"/>
<rect x="10" y="155" width="186" height="125" 
     filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125" 
     filter="url(#myFilter3)"/>
<rect x="215" y="10" width="186" height="125" 
     filter="url(#myFilter4)"/>
<rect x="215" y="155" width="186" height="125" 
     filter="url(#myFilter5)"/>
<rect x="215" y="300" width="186" height="125" 
     filter="url(#myFilter6)"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
       operator="arithmetic"</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       operator="over"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       operator="in"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       operator="out"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       operator="atop"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       operator="xor"</text>

</svg>
Листинг 8.1.5. Пример feFlood5.svg
Различные значения атрибута operator.
Вид в браузере

При совместном использовании фильтров feFlood и feComposite достигается не только тонировка изображения, но и смешивание пикселов исходного изображения и верхнего цвета.

< Лекция 7 || Лекция 8: 12345 || Лекция 9 >
Светлана Ведяева
Светлана Ведяева
Россия, Саратов
Николай Будько
Николай Будько
Молдова, Кишинев