Modos de fusión

Examina la muestra

Los gráficos de interfaz de usuario de aplicación multiplataforma (.NET MAUI) de .NET permiten especificar diferentes operaciones de redacción para objetos gráficos que la propiedad ICanvas.BlendMode especifique. Esta propiedad determina lo que sucede cuando un objeto gráfico (denominado origen) se representa sobre un objeto gráfico existente (denominado destino).

Importante

Los modos blend solo se implementan en iOS y Mac Catalyst. Para más información, consulte este problema de GitHub.

De forma predeterminada, el último objeto dibujado oculta los objetos dibujados debajo de él:

En este ejemplo, el círculo cian se dibuja primero, seguido del círculo magenta y, a continuación, el círculo amarillo. Cada círculo oculta el círculo dibujado debajo de él. Esto ocurre porque el modo de combinación predeterminado es Normal, lo que significa que el origen se dibuja sobre el destino. Sin embargo, es posible especificar un modo de combinación diferente para un resultado diferente. Por ejemplo, si se especifica DestinationOver, en el área donde se cruzan el origen y el destino, el destino se dibuja sobre el origen.

Los 28 miembros de la enumeración BlendMode se pueden dividir en tres categorías:

Separable	No separable	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

El orden en que aparecen los miembros en la tabla anterior será el mismo que en la enumeración BlendMode. La primera columna muestra los 12 modos de combinación separables, mientras que la segunda columna enumera los modos de combinación no separables. Por último, en la tercera columna se enumeran los modos de combinación Porter-Duff.

Modos de fusión Porter-Duff

Los modos de fusión Porter-Duff, denominados por Thomas Porter y Tom Duff, definen 12 operadores de redacción que describen cómo procesar el color resultante de la composición del origen con la del destino. Estos operadores de redacción se pueden describir mejor teniendo en cuenta el caso de dibujar dos rectángulos que contienen áreas transparentes:

En la imagen anterior, el destino es un rectángulo transparente, excepto un área marrón que ocupa los dos tercios izquierdo y superior de la superficie de visualización. El origen también es un rectángulo transparente, excepto un área azul que ocupa los dos tercios derecho e inferior de la superficie de visualización. Al mostrar el origen en el destino se produce el resultado siguiente:

Los píxeles transparentes del origen permiten ver el fondo, mientras que los píxeles de origen azul ocultan el fondo. Este es el caso normal, mediante el modo de fusión predeterminado de Normal. Sin embargo, es posible especificar que, en el área donde el origen y el destino se cruzan, el destino aparece en lugar del origen, mediante el modo de fusión DestinationOver:

El modo de fusión DestinationIn muestra solo el área en la que el destino y el origen se cruzan mediante el color de destino:

El modo de fusión Xor no hace que aparezca nada donde las dos áreas se superponen:

El destino coloreado y los rectángulos de origen dividen eficazmente la superficie de visualización en cuatro áreas únicas que se pueden colorear de diferentes maneras, y que se corresponderán con la presencia de los rectángulos de origen y destino:

Los rectángulos superior derecho e inferior izquierdo siempre estarán en blanco, porque tanto el destino como el origen son transparentes en esas áreas. El color de destino ocupa el área superior izquierda, de modo que ese área se pueda colorear con el color de destino o no se coloree del todo. Del mismo modo, el color de origen ocupará el área inferior derecha, para que el área se pueda colorear con el color de origen o no se coloree del todo.

En la tabla siguiente se enumeran los modos de fusión Porter-Duff proporcionados por Microsoft.Maui.Graphics y cómo se coloreará cada una de las tres áreas que no están en blanco en el diagrama anterior:

Modo de fusión	Destino	Intersección	Source
Clear
Copy		Source	X
SourceIn		Source
SourceOut			X
SourceAtop	X	Source
DestinationOver	X	Destino	X
DestinationIn		Destino
DestinationOut	X
DestinationAtop		Destino	X
Xor	X		X
PlusDarker	X	Sum	X
PlusLighter	X	Sum	X

La convención de nomenclatura de los modos sigue algunas reglas simples:

• El sufijo Over indica lo que está visible en la intersección. El origen o el destino se dibujan sobre el otro.
• El sufijo In significa que solo se colorea la intersección. El resultado se restringe solo a la parte del origen o destino que se está en el otro.
• El sufijo Out significa que la intersección no está colorada. El resultado es solo la parte del origen o destino que está fuera de la intersección.
• El sufijo Atop es la unión de In y Out. Incluye el área en la que el origen o el destino está encima del otro.

Nota:

Estos modos de fusión son simétricos. El origen y el destino se pueden intercambiar y todos los modos siguen estando disponibles.

El modo de fusión PlusLighter suma el origen y el destino. Después, para los valores superiores a 1, se muestra el blanco. De manera similar, el modo de mezcla PlusDarker suma el origen y el destino, pero resta 1 de los valores resultantes, con valores inferiores a 0 convirtiéndose en negro.

Modos de fusión separables

Los modos de fusión separables modifican los componentes de color rojo, verde y azul individuales de un objeto gráfico.

En la tabla siguiente se muestran los modos de fusión separables, con breves explicaciones de lo que hacen. En la tabla, Dc y Sc hacen referencia a los colores de destino y origen, y la segunda columna muestra el color de origen que no produce ningún cambio:

Modo de fusión	Sin cambios	Operación
Normal		Sin fusión, origen seleccionado
Multiply	White	Oscurece multiplicando Sc-Dc
Screen	Black	Complementa el producto de complementos: Sc + Dc - Sc.Dc
Overlay	Gray	Inverso de HardLight
Darken	White	Mínimo de colores: min(Sc, Dc)
Lighten	Black	Máximo de colores: max(Sc, Dc)
ColorDodge	Black	Aclara el destino según el origen
ColorBurn	White	Oscurece el destino según el origen
SoftLight	Gray	Similar al efecto de un foco suave
HardLight	Gray	Similar al efecto de un foco intenso
Difference	Black	Resta el color más oscuro del color más claro: Abs(Dc - Sc)
Exclusion	Black	Similar a Difference pero con menor contraste

Nota:

Si el origen es transparente, los modos de fusión separables no tienen ningún efecto.

En el ejemplo siguiente se usa el modo de fusión Multiply para dibujar tres círculos superpuestos de cian, magenta y amarillo:

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

El resultado es que una combinación de cualquiera de los dos colores produce rojo, verde y azul, y una combinación de los tres colores produce negro.

Modos de fusión no separables

Los modos de fusión no separables combinan los valores de matiz, saturación y luminosidad del destino y del origen. Comprender estos modos de fusión requiere un conocimiento del modelo de color Matiz-Saturación-Luminosidad (HSL):

• El valor de matiz representa la longitud de onda dominante del color. Los valores de matiz oscilan entre 0 y 360 y pasan por los colores primarios aditivos y sustractivos. Rojo es el valor 0, amarillo es 60, verde es 120, cian es 180, azul es 240, magenta es 300 y el ciclo regresa al rojo a 360. Si no hay ningún color dominante, por ejemplo, el color es blanco o negro o un tono gris, el tono no está definido y normalmente se establece en 0.
• El valor de saturación indica la pureza del color y puede oscilar entre 0 y 100. Un valor de saturación de 100 es el color más puro, mientras que los valores inferiores a 100 hacen que el color se vuelva más gris. Un valor de saturación de 0 da como resultado un tono gris.
• El valor de luminosidad indica lo brillante que es el color. Un valor de luminosidad de 0 es negro independientemente de otros valores. De manera similar, un valor de luminosidad de 100 es blanco.

El valor HSL (0,100,50) es el valor RGB (255,0,0), que es rojo puro. El valor HSL (180,100,50) es el valor RGB (0, 255, 255), que es cian puro. A medida que se reduce la saturación, se reduce el componente de color dominante y se incrementan los demás componentes. En un nivel de saturación de 0, todos los componentes son iguales y el color es un tono gris.

Los modos de fusión no separables conceptualmente siguen los pasos siguientes:

1. Convierte los objetos de origen y destino de su espacio de color original al espacio de color HSL.
2. Crea el objeto compuesto a partir de una combinación de componentes de matiz, saturación y luminosidad, de los objetos de origen y destino.
3. Convierte el resultado al espacio de color original.

En la tabla siguiente se muestra cómo se componen los componentes de HSL para cada modo de fusión no separable:

Modo de fusión	Componentes de origen	Componentes de destino
Hue	Hue	Saturación y luminosidad
Saturation	Saturación	Matiz y luminosidad
Color	Matiz y saturación	Luminosidad
Luminosity	Luminosidad	Matiz y saturación