Mieszanie warstw

Wstęp

Podczas tworzenia filtru może zajść potrzeba połączenie dwóch obrazków w specjalny sposób. Dotychczas używana reguła do składania obrazków feMerge wykonywała proste łącznie polegające na nałożeniu warstwy na warstwę przy zachowaniu odpowiedniej kolejności obiektów.

W tym artykule zostanie przedstawiona metoda łączenia warstw, która pozwoli na określenie w jaki sposób mają zostać wyliczone kolory łączonych pikseli. Zasada działań poniższych trybów łączenia będą bardzo proste dla osób, które już wcześniej pracowały z edytorami graficznymi.

Łączenie warstw

Reguła

Reguła pozwalająca na łączenie warstw to feBlend. Jej najprostsza wersja przyjmuje trzy argumenty. Są to: in - nazwa obrazka źródłowego oraz in2 - obrazek z którym będzie łączony. Trzeci argument to mode, który określa w jaki sposób są łączone obrazki. Domyślnym trybem jest tryb normal.

1.     <filter id="filter0">
2.       <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
3.         flood-color="#FFD800" flood-opacity="0.5"/>
4.       <feBlend in2="floodFill" in="SourceGraphic" mode="normal"/>
5.     </filter>

Powyżej został przedstawiony sposób implementacji reguły feBlend. Filtrowany obiekt jest łączony (2. - 3.) z kolorowym płótnem o wielkości flitrowanego obiektu. Potem (4.) kolorowe płótno jest łączone z filtrowanym obiektem w trybie normal. Należy pamiętać, że na obiekt in nakładany jest obiekt in2. Dalej zostanie przedstawione jaka jest różnica po zamianie wartości atrybutów.

Tryby łączenia

Tryb normalny

W trybie normalnym obrazek jest nakładany warstwa na warstwę bez dodatkowego przeliczania pikseli. Wyjątkiem są piksele przezroczyste, których przezroczystość jest uzupełniena kolorem elementu określonego jako tło podczas łączenia.

Kolor końcowy c_r = (1 - q_a)·c_b + c_a.

Ten przykład ma na celu pokazanie, że atrybut in2 określa element, który jest tłem.

Tryb mnożenia

Tryb mnożenia multiply jest trybem symetrycznym tj. nie ma tutaj znaczania, który obrazek jest tłem, a który jest ustawiony jako element na wierzchu. W tym trybie każdy piksel z obrazka in jest mnożony przez odpowiadający piksel z obrazka in2. W ten sposób uzyskuje się ciemniejszy obrazek. Z reguły ten tryb wykorzystuje się w celu zmiany oświetlenia obiektu poprzez nałożenie odpowiedniego elementu w odcieniach szarości.

Kolor końcowy c_r = (1 - q_a)·c_b + (1 - q_b)·c_a + c_a·c_b.

Jak można zauważyć operacja jest symetryczna i nie zależy od wyboru in i in2.

Tryb omglenia

Tryb omglenia screen jest kolejnym trybem symetrycznym o działaniu przeciwnym do trybu mnożenia multiply. Tym razem obrazek wynikowy będzie jaśniejszy. Zmiana poziomu jasności zależy oczywiście od odpowiadających pikseli na obu obrazkach.

Kolor końcowy c_r = c_b + c_a - c_a·c_b.

Ponownie można zauważyć, że ta operacja też jest symetryczna i nie zależy od wyboru in i in2.

Tryb jaśniejsze i ciemniejsze

Istnieją jeszcze dwa tryby mieszania: lighten i darken, które kolejno wybierają z obrazków jaśniejsze i ciemniejsze piksele. Na podstawie równań określających wyliczanie pikseli można zauważyć, że wybierają one piksele jak w trybie normalnym, ale tym razem wybierają jaśniejsze (ciemniejszy) piksel jako ten główny, a ciemniejszy (jaśniejszy) jako kolor z tła.

Kolor końcowy lighten c_r = Min((1 - q_a)·c_b + c_a, (1 - q_b)·c_a + c_b).
Kolor końcowy darken c_r = Max((1 - q_a)·c_b + c_a, (1 - q_b)·c_a + c_b).

Oryginał	mode="darken"	mode="lighten"

Jako można zauważyć widoczna jest tylko ta część tekstu, która ma ciemniejsze (jaśniejsze) piksele od gradientu.