Цветовые матрицы

Цветовые матрицы в Snap.svg представляют собой мощный инструмент для изменения визуальных свойств графических объектов. Они позволяют модифицировать цвет, насыщенность, контраст и яркость элементов SVG с помощью линейной алгебры. Основой для таких преобразований является 5x4 матрица, где каждая строка отвечает за отдельный канал цвета: красный, зелёный, синий и альфа (прозрачность).

Структура цветовой матрицы

Цветовая матрица имеет вид:

[ a, b, c, d, e,
  f, g, h, i, j,
  k, l, m, n, o,
  p, q, r, s, t ]

Где:

  • a, g, m, s — коэффициенты масштабирования для каналов R, G, B и A.
  • b, c, d, f, h, i, k, l, n, p, q, r — коэффициенты смешивания между каналами.
  • e, j, o, t — смещения (offset), добавляемые к каждому каналу.

Применение матрицы к пикселю (R, G, B, A) вычисляется по формуле:

R' = a*R + b*G + c*B + d*A + e
G' = f*R + g*G + h*B + i*A + j
B' = k*R + l*G + m*B + n*A + o
A' = p*R + q*G + r*B + s*A + t

Создание и применение фильтров в Snap.svg

Snap.svg предоставляет удобный способ работы с фильтрами через метод filter(). Для цветовых матриц используется фильтр <feColorMatrix>:

var s = Snap("#svg");
var rect = s.rect(10, 10, 200, 200).attr({fill: "#ff0000"});

var matrix = "matrix(1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0)";
var filter = s.filter(Snap.filter.colorMatrix(matrix));

rect.attr({filter: filter});

Здесь matrix() принимает 20 чисел, соответствующих 5x4 структуре. В примере используется единичная матрица, которая не изменяет цвета, но её можно модифицировать для различных эффектов.

Примеры цветовых преобразований

1. Чёрно-белое изображение

Для превращения цветного объекта в монохромный используется матрица:

var bwMatrix = "matrix(0.33 0.34 0.33 0 0  0.33 0.34 0.33 0 0  0.33 0.34 0.33 0 0  0 0 0 1 0)";
rect.attr({filter: s.filter(Snap.filter.colorMatrix(bwMatrix))});

2. Инверсия цветов

Инвертирование цветов создаётся за счёт умножения на -1 и добавления смещения 255:

var invertMatrix = "matrix(-1 0 0 0 255  0 -1 0 0 255  0 0 -1 0 255  0 0 0 1 0)";
rect.attr({filter: s.filter(Snap.filter.colorMatrix(invertMatrix))});

3. Повышение контрастности

Для усиления контрастности матрица включает коэффициенты >1 для каналов и смещение:

var contrastMatrix = "matrix(1.5 0 0 0 -64  0 1.5 0 0 -64  0 0 1.5 0 -64  0 0 0 1 0)";
rect.attr({filter: s.filter(Snap.filter.colorMatrix(contrastMatrix))});

Динамическое изменение цвета

Snap.svg позволяет анимировать цветовые эффекты, меняя матрицу во времени. Например, плавная смена насыщенности:

var saturateMatrix = "matrix(1.5 0 0 0 0  0 1.5 0 0 0  0 0 1.5 0 0  0 0 0 1 0)";

rect.animate({filter: s.filter(Snap.filter.colorMatrix(saturateMatrix))}, 2000, mina.easeinout);

Использование animate() с фильтром создаёт впечатляющие визуальные эффекты без изменения исходного SVG-кода.

Комбинирование фильтров

Несколько фильтров могут применяться одновременно через метод append(), что позволяет комбинировать цветовые изменения с размытием, смещением и другими эффектами:

var blur = s.filter(Snap.filter.blur(5, 5));
var colorMat = s.filter(Snap.filter.colorMatrix(bwMatrix));

rect.attr({filter: blur});
rect.attr({filter: colorMat.append(blur)});

Порядок применения фильтров важен: верхний фильтр применяется после нижнего, создавая наслоение эффектов.

Практические рекомендации

  • Для простых цветовых эффектов достаточно менять коэффициенты диагонали матрицы (a, g, m) и смещения (e, j, o).
  • При сложных эффектах, включающих смешение каналов, важно тестировать визуальный результат, так как неправильные значения могут полностью изменить восприятие цвета.
  • Анимации цветовых матриц часто требуют использования mina для плавного интерполирования значений.

Эти возможности делают Snap.svg гибким инструментом для создания интерактивной графики, где визуальные эффекты управляются математически точными преобразованиями цветов.

Оглавление