Modos de mesclagem

Navegue pelo exemplo

Os gráficos .NET Multi-platform App UI (.NET MAUI) permitem que diferentes operações de composição para objetos gráficos sejam especificadas ICanvas.BlendMode pela propriedade. Essa propriedade determina o que acontece quando um objeto gráfico (chamado de origem) é renderizado sobre um objeto gráfico existente (chamado de destino).

Importante

Os modos de mesclagem são implementados apenas no iOS e no Mac Catalyst. Saiba mais neste tópico do GitHub.

Por padrão, o último objeto desenhado obscurece os objetos desenhados abaixo dele:

Neste exemplo, o círculo ciano é desenhado primeiro, seguido pelo círculo magenta e, em seguida, o círculo amarelo. Cada círculo obscurece o círculo desenhado abaixo dele. Isso ocorre porque o modo de mesclagem padrão é , o que significa que a origem é Normaldesenhada sobre o destino. No entanto, é possível especificar um modo de mesclagem diferente para um resultado diferente. Por exemplo, se você especificar DestinationOver, na área onde a origem e o destino se cruzam, o destino é desenhado sobre a origem.

Os 28 membros da BlendMode enumeração podem ser divididos em três categorias:

Separável	Não separável	Porter-Duff
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

A ordem em que os membros estão listados na tabela acima é a mesma que na BlendMode enumeração. A primeira coluna lista os 12 modos de mesclagem separáveis, enquanto a segunda coluna lista os modos de mesclagem não separáveis. Finalmente, a terceira coluna lista os modos de mistura Porter-Duff.

Modos de mistura Porter-Duff

Os modos de mistura Porter-Duff, nomeados em homenagem a Thomas Porter e Tom Duff, definem 12 operadores de composição que descrevem como calcular a cor resultante da composição da origem com o destino. Esses operadores de composição podem ser melhor descritos considerando o caso de desenhar dois retângulos que contêm áreas transparentes:

Na imagem acima, o destino é um retângulo transparente, exceto por uma área marrom que ocupa os dois terços esquerdo e superior da superfície da tela. A fonte também é um retângulo transparente, exceto por uma área azul que ocupa os dois terços direito e inferior da superfície da tela. A exibição da origem no destino produz o seguinte resultado:

Os pixels transparentes da fonte permitem que o plano de fundo apareça, enquanto os pixels de origem azuis obscurecem o plano de fundo. Este é o caso normal, usando o modo de mesclagem padrão do Normal. No entanto, é possível especificar que, na área onde a origem e o destino se cruzam, o destino aparece em vez da origem, usando o DestinationOver modo de mesclagem:

O DestinationIn modo de mesclagem exibe apenas a área onde o destino e a origem se cruzam, usando a cor de destino:

O Xor modo de mesclagem faz com que nada apareça onde as duas áreas se sobrepõem:

Os retângulos coloridos de destino e origem dividem efetivamente a superfície de exibição em quatro áreas exclusivas que podem ser coloridas de maneiras diferentes, correspondendo à presença dos retângulos de destino e de origem:

Os retângulos superior direito e inferior esquerdo estão sempre em branco porque o destino e a origem são transparentes nessas áreas. A cor de destino ocupa a área superior esquerda, de modo que essa área pode ser colorida com a cor de destino ou não. Da mesma forma, a cor de origem ocupa a área inferior direita, de modo que essa área pode ser colorida com a cor de origem ou não.

A tabela a seguir lista os modos de mesclagem Porter-Duff fornecidos pelo Microsoft.Maui.Graphics, e como eles colorem cada uma das três áreas não em branco no diagrama acima:

Modo de mesclagem	Destino	Cruzamento	Origem
Clear
Copy		Origem	X
SourceIn		Origem
SourceOut			X
SourceAtop	X	Origem
DestinationOver	X	Destino	X
DestinationIn		Destino
DestinationOut	X
DestinationAtop		Destino	X
Xor	X		X
PlusDarker	X	Somar	X
PlusLighter	X	Somar	X

A convenção de nomenclatura dos modos segue algumas regras simples:

• O sufixo Over indica o que é visível na interseção. Ou a origem ou o destino é desenhado sobre o outro.
• O sufixo In significa que apenas a interseção é colorida. A saída é restrita apenas à parte da origem ou destino que está na outra.
• O sufixo Out significa que a interseção não está colorida. A saída é apenas a parte da origem ou do destino que está fora da interseção.
• O sufixo Atop é a união de In e Out. Inclui a área onde a origem ou destino está em cima da outra.

Observação

Esses modos de mesclagem são simétricos. A origem e o destino podem ser trocados, e todos os modos ainda estão disponíveis.

O PlusLighter modo de mesclagem soma a origem e o destino. Em seguida, para valores acima de 1, o branco é exibido. Da mesma forma, o modo de mesclagem soma a origem e o PlusDarker destino, mas subtrai 1 dos valores resultantes, com valores abaixo de 0 tornando-se pretos.

Modos de mistura separáveis

Os modos de mesclagem separáveis alteram os componentes individuais de cores vermelho, verde e azul de um objeto gráfico.

A tabela a seguir mostra os modos de mesclagem separáveis, com breves explicações do que eles fazem. Na tabela, e consulte as cores de destino e origem, Dc e Sc a segunda coluna mostra a cor de origem que não produz nenhuma alteração:

Modo de mesclagem	Nenhuma alteração	Operação
Normal		Sem mistura, fonte selecionada
Multiply	White	Escurece multiplicando Sc-Dc
Screen	Black	Complementa o produto de complementos: Sc + Dc - Sc.Dc
Overlay	Gray	Inverso de HardLight
Darken	White	Mínimo de cores: min(Sc, Dc)
Lighten	Black	Máximo de cores: max(Sc, Dc)
ColorDodge	Black	Ilumina o destino com base na origem
ColorBurn	White	Escurece o destino com base na origem
SoftLight	Gray	Semelhante ao efeito de um holofote suave
HardLight	Gray	Semelhante ao efeito de um holofote severo
Difference	Black	Subtrai a cor mais escura da cor mais clara: Abs(Dc - Sc)
Exclusion	Black	Contraste semelhante, Difference mas mais baixo

Observação

Se a origem for transparente, os modos de mesclagem separáveis não terão efeito.

O exemplo a seguir usa o modo de mesclagem Multiply para desenhar três círculos sobrepostos de ciano, magenta e amarelo:

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);

O resultado é que uma combinação de quaisquer duas cores produz vermelho, verde e azul, e uma combinação de todas as três cores produz preto.

Modos de mistura não separáveis

Os modos de mesclagem não separáveis combinam valores de matiz, saturação e luminosidade do destino e da origem. A compreensão desses modos de mistura requer uma compreensão do modelo de cores Hue-Saturation-Luminosity (HSL):

• O valor de matiz representa o comprimento de onda dominante da cor. Os valores de matiz variam de 0 a 360 e percorrem as cores primárias aditivas e subtrativas. Vermelho é o valor 0, amarelo é 60, verde é 120, ciano é 180, azul é 240, magenta é 300, e o ciclo retorna ao vermelho em 360. Se não houver nenhuma cor dominante, por exemplo, a cor é branca ou preta ou um tom de cinza, então a tonalidade é indefinida e geralmente definida como 0.
• O valor de saturação indica a pureza da cor, podendo variar de 0 a 100. Um valor de saturação de 100 é a cor mais pura, enquanto valores inferiores a 100 fazem com que a cor se torne mais acinzentada. Um valor de saturação de 0 resulta em um tom de cinza.
• O valor de luminosidade indica o quão brilhante é a cor. Um valor de luminosidade de 0 é preto independentemente de outros valores. Da mesma forma, um valor de luminosidade de 100 é branco.

O valor HSL (0,100,50) é o valor RGB (255,0,0), que é vermelho puro. O valor HSL (180,100,50) é o valor RGB (0, 255, 255), que é ciano puro. À medida que a saturação é diminuída, o componente de cor dominante é diminuído e os outros componentes são aumentados. Em um nível de saturação de 0, todos os componentes são os mesmos e a cor é um tom de cinza.

Os modos de mesclagem não separáveis executam conceitualmente as seguintes etapas:

1. Converta os objetos de origem e destino de seu espaço de cores original para o espaço de cores HSL.
2. Crie o objeto composto a partir de uma combinação de componentes de matiz, saturação e luminosidade, a partir dos objetos de origem e destino.
3. Converta o resultado de volta para o espaço de cores original.

A tabela a seguir lista como quais componentes HSL são compostos para cada modo de mesclagem não separável:

Modo de mesclagem	Produzir componentes	Componentes de destino
Hue	Matiz	Saturação e Luminosidade
Saturation	Saturação	Matiz e Luminosidade
Color	Matiz e Saturação	Luminosidade
Luminosity	Luminosidade	Matiz e Saturação