W celu zmiany koloru obiektu można wykorzystać filtr kolorowy feColorMatrix. W celu dokładnego zrozumienia jak działa filtr warto wiedzieć co to są macierze i jak się wykonuje na nich zadania. Oczywiście można też eksperymentować z różnymi wartościami, aby pojąć logikę przeliczeń.
Ten artykuł został podzielony na dwie części. Pierwsza z nich dotyczy podstawowych przekształceń, a druga to bardzo dokładny opis przekształceń zadawanych przez używany filtr.
Regułę filtru feColorMatrix wstawia się jako podobiekt obiektu filter, który jest zbiorem reguł przekształcenia. Reguła feColorMatrix przyjmuje dwa argumenty: type - określa rodzaj przekształcenia oraz value - określa argumenty na podstawie, których zostanie wykonane filtrowanie.
W celu zmiany odcienia kolorów wybranego fragmentu grafiki należy zadeklarować regułę feColorMatrix i atrybutowi type nadać wartość hueRotate, a jako atrybut values można wpisać dowolną liczbę rzeczywistą w stopniach czyli z przedziału [0, 360).
| Oryginał | Z filtrem values="90" | Z filtrem values="180" |
|---|---|---|
Przykładowo deklaracja reguły wygląda następująco:
Do zmiany poziomu nasycenia kolorów obiektu w zadeklarowanej regule feColorMatrix atrybut type powinien zostać ustawiony na saturate. Tym razem atrybut values może zostać ustawiony na dowolną wartość rzeczywistością z przedziału [0, 1]. Wartość 1 odpowiada pełnemu nasyceniu kolorów, a wartość 0 całkowicie pozbawia obrazek kolorów.
| Oryginał = Z filtrem values="1" | Z filtrem values="0.5" | Z filtrem values="0.0" |
|---|---|---|
Przykładowo deklaracja reguły wygląda następująco:
Kolejny typ reguły feColorMatrix zamienia jasność koloru na przezroczystość. Ten type ma wartości luminanceToAlpha. W tym przypadku atrybut values jest całkowicie pomijany. W tym przypadku wartość kanałów R, G, B kolorów są zamieniane na kanał przezroczystości. Może to się okazać przydatne w przypadku nakładania efektów błysku lub odbicia.
| Oryginał | Z filtrem |
|---|---|
Przykładowo deklaracja reguły wygląda następująco:
Do wyjaśnienia pozostała ostatnia możliwa wartość atrybutu type. Czwarty możliwy typ umożliwia określenie matrycy przekształcenia. Atrybut type należy ustawić na wartość matrix, a następnie podać 20 wartości oddzielonych znakiem spacji. Kolejne wartości oznaczają {a00, a01, a02, a03, a04, a10, .., a20, ..} w poniższym wzorze:
| A' | ||
| R' | ||
| G' | ||
| B' | ||
| 1 |
| = |
| a00 | a01 | a02 | a03 | a04 | ||
| a10 | a11 | a12 | a13 | a14 | ||
| a20 | a21 | a22 | a23 | a24 | ||
| a30 | a32 | a32 | a33 | a34 | ||
| 0 | 0 | 0 | 0 | 1 |
| · |
| A | ||
| R | ||
| G | ||
| B | ||
| 1 |
Przedstawiona macierz jest macierzą przekształceń wartości koloru. Wartości R, G, B, A to odpowiednio wartości kanału czerwonego, zielonego, niebieskiego oraz przezroczystości. Wektor z nich złożony jest mnożony przez macierz utworzoną z przekazanych wartości. W przypadku podania macierzy jednostkowej (tj. jedynkę dla macierzy) kolor nie zostanie zmieniony.
Generalnie wszystkie przekształcenia proste opisane wcześniej korzystają z tej macierzy podstawiając do podanej macierzy wcześniej przygotowane dane. Poniżej zostały podane niektóre przykłady macierzy użytych do przekształceń.
| 1 | 0 | 0 | 0 | 0 | ||
| 0 | 1 | 0 | 0 | 0 | ||
| 0 | 0 | 1 | 0 | 0 | ||
| 0 | 0 | 0 | 1 | 0 | ||
| 0 | 0 | 0 | 0 | 1 |
| 0 | 0 | 0 | 0 | 0 | ||
| 0 | 1 | 0 | 0 | 0 | ||
| 0 | 0 | 1 | 0 | 0 | ||
| 0 | 0 | 0 | 1 | 0 | ||
| 0 | 0 | 0 | 0 | 1 |
| 0.213+0.787s | 0.715-0.715s | 0.072-0.072s | 0 | 0 | ||
| 0.213-0.213s | 0.715+0.285s | 0.072-0.072s | 0 | 0 | ||
| 0.213-0.213s | 0.715-0.715s | 0.072+0.928s | 0 | 0 | ||
| 0 | 0 | 0 | 1 | 0 | ||
| 0 | 0 | 0 | 0 | 1 |
Przykładowo deklaracja reguły wygląda następująco:
Narysuj na płótnie trzy kwadraty i ustaw je koło siebie. Każdy z nich powinien mieć ustawiony domyślnie czerwony kolor wypełnienia. Wykorzystaj dowolny z filtrów w celu zmiany koloru drugiego i trzeciego kwadratu od lewej. Spróbuj znaleźć takie wartości, aby kwadraty miały kolejno kolory czerwony, zielony i niebieski.
Napisz filtr, który przekształci pewien obiekt w cztery takie same obiekty, ale w lewym górnym rogu ma być obrazek bez zmiany, w prawym górnym tylko kanał R, w lewym dolnym G, a w prawym dolnm B tak jak to zostało przestawionej poniżej:
Wykorzystany obraz jest dowolny, ale najważniejsze, aby miał każdy z kolorów, aby zobaczyć, że efekt końcowy został osiągnięty. W przypadku problemów z wykonaniem wszystkich czterech wartość spróbować zrobić chociaż jedno przekształcenie obok z wybranym kanałem.
