Modos de fusión de SkiaSharp

Estos artículos se centran en la propiedad BlendMode de SKPaint. La propiedad BlendMode es de tipo SKBlendMode, una enumeración con 29 miembros.

La propiedad BlendMode determina lo que sucede cuando un objeto gráfico (a menudo denominado origen) se representa sobre los objetos gráficos existentes (denominados destino). Normalmente, esperamos que el nuevo objeto gráfico oculte los objetos debajo de él. Pero esto solo sucede porque el modo de combinación predeterminado es SKBlendMode.SrcOver, lo que significa que el origen se dibuja sobre el destino. Los otros 28 miembros de SKBlendMode causan otros efectos. En la programación de gráficos, la técnica de combinar objetos gráficos de varias maneras se conoce como composición.

Enumeración SKBlendModes

Los modos de fusión SkiaSharp corresponden estrechamente a los descritos en la especificación W3C Composición y combinación de nivel 1. La información general de SkBlendMode de Skia también proporciona información de fondo útil. Para obtener una introducción general a los modos de mezcla, el artículo modos de fusión en Wikipedia es un buen comienzo. Los modos de fusión se admiten en Adobe Photoshop, por lo que hay mucha información en línea adicional sobre los modos de fusión en ese contexto.

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

Porter-Duff Separable No separable
Clear Modulate Hue
Src Screen Saturation
Dst Overlay Color
SrcOver Darken Luminosity
DstOver Lighten
SrcIn ColorDodge
DstIn ColorBurn
SrcOut HardLight
DstOut SoftLight
SrcATop Difference
DstATop Exclusion
Xor Multiply
Plus

Los nombres de estas tres categorías tendrán más sentido en las discusiones siguientes. El orden en que aparecen los miembros aquí es el mismo que en la definición de la enumeración SKBlendMode. Los 13 miembros de enumeración de la primera columna tienen los valores enteros de 0 a 12. La segunda columna son miembros de enumeración que corresponden a enteros de 13 a 24 y los miembros de la tercera columna tienen valores de 25 a 28.

Estos modos de fusión se describen en aproximadamente el mismo orden en el documento W3C Composición y combinación de nivel 1, pero hay algunas diferencias: el modo Src se denomina Copy en el documento W3C y Plus se llama Light. El documento W3C define un modo de fusión Normal que no está incluido en SKBlendModes porque sería el mismo que SrcOver. El modo de fusión Modulate (en la parte superior de la segunda columna) no se incluye en el documento W3C y la explicación del modo de Multiply precede a Screen.

Dado que el modo de fusión Modulate es único para Skia, se analizará como un modo Porter-Duff adicional y como modo separable.

La importancia de la transparencia

Históricamente, la composición se desarrolló junto con el concepto del canal alfa. En una superficie de visualización como el objeto SKCanvas y un mapa de bits de color completo, cada píxel consta de 4 bytes: 1 byte cada uno para los componentes rojo, verde y azul, y un byte adicional para la transparencia. Este componente alfa es 0 para una transparencia completa y 0xFF para la opacidad completa, con diferentes niveles de transparencia entre esos valores.

Muchos de los modos de mezcla dependen de la transparencia. Normalmente, cuando un SKCanvas se obtiene por primera vez en un controlador PaintSurface, o cuando se crea un SKCanvas para dibujar en un mapa de bits, el primer paso es esta llamada:

canvas.Clear();

Este método reemplaza todos los píxeles del lienzo por píxeles negros transparentes, equivalentes a new SKColor(0, 0, 0, 0) o al entero 0x00000000. Todos los bytes de todos los píxeles se inicializan en cero.

La superficie de dibujo de un SKCanvas que se obtiene en un controlador PaintSurface puede parecer tener un fondo blanco, pero eso es solo porque SKCanvasView tiene un fondo transparente y la página tiene un fondo blanco. Puede demostrar este hecho usted mismo estableciendo la propiedad Xamarin.FormsBackgroundColor de SKCanvasView en un color Xamarin.Forms:

canvasView.BackgroundColor = Color.Red;

O bien, en una clase que deriva de ContentPage, puede establecer el color de fondo de la página:

BackgroundColor = Color.Red;

Verá este fondo rojo detrás de los gráficos SkiaSharp porque el propio lienzo SkiaSharp es transparente.

El artículo Transparencia de SkiaSharp mostró algunas técnicas básicas en el uso de la transparencia para organizar varios gráficos en una imagen compuesta. Los modos de fusión van más allá de eso, pero la transparencia sigue siendo fundamental para los modos de fusión.

Modos de fusión SkiaSharp Porter-Duff

Use los modos de fusión Porter-Duff para componer escenas basadas en imágenes de origen y destino.

Modos de fusión separable SkiaSharp

Use los modos de fusión separable para modificar los colores rojo, verde y azul.

Modos de fusión no separable de SkiaSharp

Utilice los modos de fusión no separables para modificar el tono, la saturación o la luminosidad.