Режимы смешения

Обзор примера

Графический интерфейс многоплатформенного приложения .NET (.NET MAUI) позволяет выполнять различные операции создания элементов для графических объектов, заданных свойством ICanvas.BlendMode . Это свойство определяет, что происходит, когда графический объект (называемый источником), отрисовывается поверх существующего графического объекта (называемого назначением).

Важно!

Режимы смешивания реализованы только в iOS и Mac Catalyst. Дополнительные сведения см. здесь на GitHub.

По умолчанию последний рисованный объект скрывает объекты, нарисованные под ним:

В этом примере сначала рисуется круг циана, за которым следует круг пурпура, затем желтый круг. Каждый круг скрывает круг, нарисованный под ним. Это происходит из-за того, что режим смешивания по умолчанию — Normalэто означает, что источник нарисовывается по назначению. Однако можно указать другой режим смешения для другого результата. Например, если указать DestinationOver, то в области, в которой пересекается источник и место назначения, назначение выполняется по источнику.

28 членов BlendMode перечисления можно разделить на три категории:

Разделяющимися	Неразделимые	Портер-Дафф
Normal	Hue	Clear
Multiply	Saturation	Copy
Screen	Color	SourceIn
Overlay	Luminosity	SourceOut
Darken		SourceAtop
Lighten		DestinationOver
ColorDodge		DestinationIn
ColorBurn		DestinationOut
SoftLight		DestinationAtop
HardLight		Xor
Difference		PlusDarker
Exclusion		PlusLighter

Порядок перечисления элементов в таблице выше совпадает с BlendMode порядком перечисления. Первый столбец содержит 12 режимов сепарабельного смешения, а второй столбец содержит режимы неразделимого смешения. Наконец, третий столбец содержит режимы смешения Porter-Duff .

Режимы смешения Porter-Duff

Режимы смешивания Porter-Duff, названные в честь Томаса Портера и Тома Даффа, определяют 12 операторов создания, описывающих, как вычислить цвет, полученный из композиции источника с назначением. Эти операторы создания можно лучше всего описать, учитывая случай рисования двух прямоугольников, содержащих прозрачные области:

На изображении выше назначение является прозрачным прямоугольником, за исключением коричневой области, которая занимает левую и верхнюю две трети поверхности дисплея. Источник также является прозрачным прямоугольником, за исключением синей области, которая занимает правое и нижнее две трети поверхности дисплея. Отображение источника в назначении приводит к следующему результату:

Прозрачные пиксели источника позволяют фону отображаться сквозно, а синие исходные пиксели скрывают фон. Это обычное дело с использованием режима Normalсмешения по умолчанию. Однако можно указать, что в области, в которой пересекается источник и назначение, назначение отображается вместо источника с помощью DestinationOver режима смешения:

В режиме DestinationIn смешения отображается только область, в которой место назначения и источник пересекаются с помощью цвета назначения:

Режим Xor смешивания не приводит к тому, что две области перекрываются:

Цветные целевые и исходные прямоугольники эффективно разделяют поверхность отображения на четыре уникальные области, которые можно цветить разными способами, соответствующим присутствию целевых и исходных прямоугольников:

Прямоугольники в правом верхнем и нижнем углу всегда пусты, так как назначение и источник прозрачны в этих областях. Цвет назначения занимает верхнюю левую область, чтобы область может быть цветом с помощью цвета назначения или вообще. Аналогичным образом, исходный цвет занимает правое нижнее правое пространство, чтобы область может быть окрашена с помощью исходного цвета или не вообще.

В следующей таблице перечислены режимы смешивания Porter-Duff, предоставляемые Microsoft.Maui.Graphicsи как они цветят каждую из трех непустых областей на схеме выше:

Режим смешивания	Назначение	Пересечения	Оригинал
Clear
Copy		Источник	X
SourceIn		Источник
SourceOut			X
SourceAtop	X	Источник
DestinationOver	X	Назначение	X
DestinationIn		Назначение
DestinationOut	X
DestinationAtop		Назначение	X
Xor	X		X
PlusDarker	X	Sum	X
PlusLighter	X	Sum	X

Соглашение об именовании режимов соответствует нескольким простым правилам:

• Суффикс Over указывает, что видно в пересечении. Источник или назначение рисуется поверх другого.
• Суффикс в суффиксе означает, что только пересечение цветом. Выходные данные ограничены только частью источника или назначения, которая находится в другой.
• Суффикс Out означает, что пересечение не окрашено. Выходные данные — это только часть источника или назначения, которая находится вне пересечения.
• Суффикс Атоп является объединением In and Out. Он включает область, в которой источник или назначение находится на вершине другого.

Примечание.

Эти режимы смешивания симметричные. Исходный и целевой параметры можно обменять, и все режимы по-прежнему доступны.

Режим PlusLighter смешивания суммирует источник и назначение. Затем для значений выше 1 отображается белый цвет. Аналогичным образом PlusDarker режим смешивания суммирует исходный и целевой значения, но вычитает 1 из полученных значений, причем значения ниже 0 становятся черными.

Режимы смешения с разделением

Режимы смешения с разделителями изменяют отдельные красные, зеленые и синие цвета компонентов графического объекта.

В следующей таблице показаны режимы сепарируемых смешений с краткими объяснениями того, что они делают. В таблице Dc и Sc ссылки на конечные и исходные цвета, а второй столбец показывает исходный цвет, который не приводит к изменению:

Режим смешивания	Без изменений	Операция
Normal		Без смешивания, выбранный источник
Multiply	White	Темнеет путем умножения Sc-Dc
Screen	Black	Дополняет продукт дополнений: Sc + Dc - Sc.Dc
Overlay	Gray	Обратное HardLight
Darken	White	Минимум цветов: min(Sc, Dc)
Lighten	Black	Максимальное количество цветов: max(Sc, Dc)
ColorDodge	Black	Светит место назначения на основе источника
ColorBurn	White	Темняет назначение на основе источника
SoftLight	Gray	Аналогично эффекту мягкого внимания
HardLight	Gray	Похоже на эффект жесткого внимания
Difference	Black	Вычитает темный цвет из более светлого цвета: Abs(Dc - Sc)
Exclusion	Black	Difference Аналогично, но более низкая контрастность

Примечание.

Если источник прозрачный, то режимы смешения с разделителями не влияют.

В следующем примере используется Multiply режим смешивания для рисования трех перекрывающихся кругов синя, пургенты и желтого цвета:

PointF center = new PointF(dirtyRect.Center.X, dirtyRect.Center.Y);
float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;
float distance = 0.8f * radius;

PointF center1 = new PointF(distance * (float)Math.Cos(9 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(9 * Math.PI / 6) + center.Y);
PointF center2 = new PointF(distance * (float)Math.Cos(1 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(1 * Math.PI / 6) + center.Y);
PointF center3 = new PointF(distance * (float)Math.Cos(5 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(5 * Math.PI / 6) + center.Y);

canvas.BlendMode = BlendMode.Multiply;

canvas.FillColor = Colors.Cyan;
canvas.FillCircle(center1, radius);

canvas.FillColor = Colors.Magenta;
canvas.FillCircle(center2, radius);

canvas.FillColor = Colors.Yellow;
canvas.FillCircle(center3, radius);

Результатом является то, что сочетание любых двух цветов производит красный, зеленый и синий, а сочетание всех трех цветов производит черный цвет.

Неразделимые режимы смешения

Неразделимые режимы смешивания объединяют значения оттенков, насыщенности и светимости из назначения и источника. Для понимания этих режимов смешения требуется понимание цветовой модели Hue-Saturation-Luminosity (HSL):

• Значение оттенка представляет доминирующую длину волны цвета. Значения hue варьируются от 0 до 360, а также циклически через аддитивные и субтрактивные первичные цвета. Красный — это значение 0, желтый — 60, зеленый — 120, синий — 180, синий — 240, 300, а цикл возвращается к красному в 360. Если нет доминирующего цвета, например цвет белый или черный или серый оттенк, то оттенок не определен и обычно имеет значение 0.
• Значение насыщенности указывает чистоту цвета и может варьироваться от 0 до 100. Значение насыщенности 100 является самым чистым цветом, а значения ниже 100 приводят к тому, что цвет становится более серым. Значение насыщенности 0 приводит к оттенку серого.
• Значение светимости указывает, насколько яркий цвет. Значение светимости 0 черное независимо от других значений. Аналогичным образом, значение светимости 100 является белым.

Значение HSL (0,100,50) — это значение RGB (255 0,0), которое является чистым красным. Значение HSL (180,100,50) — это значение RGB (0, 255, 255), которое является чистым цином. По мере уменьшения насыщенности основной цветной компонент уменьшается, а другие компоненты увеличиваются. На уровне насыщенности 0 все компоненты одинаковы, и цвет является серым оттенком.

Режимы неразделимого смешения концептуально выполняют следующие действия:

1. Преобразуйте исходные и целевые объекты из исходного цветового пространства в цветовое пространство HSL.
2. Создайте составной объект из сочетания компонентов оттенка, насыщенности и света из исходных и целевых объектов.
3. Преобразуйте результат обратно в исходное цветовое пространство.

В следующей таблице перечислены составные компоненты HSL для каждого неразделимого режима смешения:

Режим смешивания	Исходные компоненты	Конечные компоненты
Hue	Оттенок	Насыщенность и светимость
Saturation	Насыщенность	Hue и Luminosity
Color	Оттенки и насыщенность	Яркость
Luminosity	Яркость	Оттенки и насыщенность