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

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

< Лекция 6 || Лекция 7: 123456 || Лекция 8 >

feMerge

Пожалуй, самой интересной особенностью программы Adobe Photoshop является возможность совмещения нескольких изображений на отдельных слоях с различной прозрачностью (рис. 7.5):

Слои в Adobe Photoshop

Рис. 7.5. Слои в Adobe Photoshop

Для решения аналогичных задач в SVG – графике используется фильтр feMerge, структура которого имеет следующий вид (рис. 7.6):

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

Рис. 7.6. Структура фильтра feMerge

Эквивалентом помещения изображения на отдельный слой здесь служит элемент (узел) feMergeNode, который входит в состав фильтра. Для каждого узла можно задавать свое изображение. В табл. 7.7 приводятся примеры использования этого фильтра.

Таблица 7.7. Фильтр feMerge.
Код Вид в браузере
7.7.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="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge1.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
           width="186" height="125" opacity="0.5"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.5"/>

  </defs>

 <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

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

</svg>
Листинг 7.7.1. Пример feMerge1.svg
Описание
При помощи элементов image в документ были добавлены два изображения sea1.jpg и sea2.jpg с прозрачностью 50%. Для этих элементов заданы атрибуты id со значениями Picture1 и Picture2. Фильтры feImage обращаются по этим атрибутам к изображениям и включают их в состав filter, задавая им названия myImage1 и myImage2. Последние названия, наконец, используются атрибутами (узлами) feMergeNode для получения композиции. При разборе этой сложной конструкции первое, что приходит в голову – а зачем вообще нужен здесь фильтр? Ведь можно было просто включить два изображения в SVG – документ, определив для них значение прозрачности в 50% (см. пример feMerge4.svg)! Ответ достаточно простой - фильтр позволяет многократно использовать композицию, а также включать ее в состав других фильтров.
Код Вид в браузере
7.7.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="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge2.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
      width="186" height="125" opacity="0.8"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.2"/>

  </defs>

  <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

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

</svg>
Листинг 7.7.2. Пример feMerge2.svg
Описание
Для первого изображения задано значение прозрачности 0.8, для второго 0.2.
Код Вид в браузере
7.7.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="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge3.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>

    <image id="Picture2" xlink:href="sea1.jpg" x="20" y="20"
      width="186" height="125" opacity="0.2"/>
    <image id="Picture1" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.8"/>

  </defs>

  <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

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

</svg>
Листинг 7.7.3. Пример feMerge3.svg
Описание
Для первого изображения задано значение прозрачности 0.2, для второго 0.8.
Код Вид в браузере
7.7.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="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge4.svg
     </desc>
     <!--Совмещенные изображения с прозрачностью-->  
     <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
            width="186" height="125" opacity="0.5"/>
     <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
            width="186" height="125" opacity="0.5"/>

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

</svg>
Листинг 7.7.4. Пример feMerge4.svg
Описание
Совмещение полупрозрачных изображений без использования фильтра.
Код Описание
7.7.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="500" height="600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge5.svg
     </desc>

     <defs>

     <filter id="merge">
          <feImage xlink:href="#Picture1" result="myImage1"/>
          <feImage xlink:href="#Picture2" result="myImage2"/>
          <feImage xlink:href="#Picture3" result="myImage3"/>
          <feImage xlink:href="#Picture4" result="myImage4"/>
          <feMerge>
               <feMergeNode in="myImage1"/>
               <feMergeNode in="myImage2"/>
               <feMergeNode in="myImage3"/>
               <feMergeNode in="myImage4"/>
          </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
           width="372" height="250" opacity="0.5"/>
    <image id="Picture3" xlink:href="sun.png" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    <image id="Picture4" xlink:href="boat.png" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    </defs>

    <rect x="20" y="20" width="372" height="250" 
          style="filter: url(#merge)"/>
 
     <!--Исходные изображения-->
     <image  xlink:href="sea1.jpg" width="186" height="125" 
            x="20" y="300"/>
     <image  xlink:href="sea2.jpg" width="186" height="125" 
            x="206" y="300"/>
     <image  xlink:href="sun.png" width="186" height="125" 
            x="20" y="425"/>
     <image  xlink:href="boat.png" width="186" height="125" 
            x="206" y="425"/>
</svg>
Листинг 7.7.5. Пример feMerge5.svg
Коллаж, состоящий из нескольких изображений. Основой для солнца и лодки служат изображения в формате . png с прозрачным фоном
Вид в браузере
< Лекция 6 || Лекция 7: 123456 || Лекция 8 >