Pintar objetos gráficos

Examina la muestra

Los gráficos de .NET Multi-Platform App UI (.NET MAUI) incluyen la posibilidad de pintar objetos gráficos con colores sólidos, degradados, imágenes repetidas y patrones.

La clase Paint es una clase abstracta que pinta un objeto con su salida. Las clases que derivan de Paint describen diferentes formas de pintar un objeto. En la lista siguiente se describen los diferentes tipos de pintura disponibles en los gráficos de .NET MAUI:

• SolidPaint, que pinta un objeto con un color sólido. Para más información, consulta Pintar con un color sólido.
• ImagePaint, que pinta un objeto con una imagen. Para más información, consulta Pintar con una imagen.
• PatternPaint, que pinta un objeto con un patrón. Para más información, consulta Pintar con un patrón.
• GradientPaint, que pinta un objeto con un degradado. Para más información, consulta Pintar con un degradado.

Las instancias de estos tipos se pueden pintar en ICanvas, normalmente mediante el método SetFillPaint para establecer la pintura como relleno de un objeto gráfico.

La clase Paint también define las propiedades BackgroundColor y ForegroundColor, de tipo Color, que se pueden usar para definir opcionalmente colores de segundo y primer plano para un objeto Paint.

Pintar con un color sólido

La clase SolidPaint, que deriva de la clase Paint, se usa para pintar un objeto gráfico con un color sólido.

La clase SolidPaint define una propiedad Color, de tipo Color, que representa el color de la pintura. La clase también tiene una propiedad IsTransparent que devuelve bool que representa si el color tiene un valor alfa menor que 1.

Creación de un objeto SolidPaint

Normalmente, el color de un objeto SolidPaint se especifica a través de su constructor con un argumento Color:

SolidPaint solidPaint = new SolidPaint(Colors.Silver);

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

El objeto SolidPaint se especifica como primer argumento al método SetFillPaint. Por lo tanto, un rectángulo redondeado lleno se pinta con un objeto SolidPaint plateado:

Como alternativa, el color se puede especificar con la propiedad Color:

SolidPaint solidPaint = new SolidPaint
{
    Color = Colors.Silver
};

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

Pintar con una imagen

La clase ImagePaint, que deriva de la clase Paint se usa para pintar un objeto gráfico con una imagen.

La clase ImagePaint define una propiedad Image, de tipo IImage, que representa la imagen que se va a pintar. La clase también tiene una propiedad IsTransparent que devuelve false.

Creación de un objeto ImagePaint

Para pintar un objeto con una imagen, carga la imagen y asígnala a la propiedad Image del objeto ImagePaint.

Nota:

Cargar una imagen insertada en un ensamblado requiere que la imagen tenga su acción de compilación establecida Recurso incrustado.

En el ejemplo siguiente se muestra cómo cargar una imagen y rellenar un rectángulo con ella:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    ImagePaint imagePaint = new ImagePaint
    {
        Image = image.Downsize(100)
    };
    canvas.SetFillPaint(imagePaint, RectF.Zero);
    canvas.FillRectangle(0, 0, 240, 300);
}

En este ejemplo, la imagen se recupera del ensamblado y se carga como una secuencia. La imagen se cambia de tamaño mediante el método Downsize que especifica que su dimensión más grande debe establecerse en 100 píxeles. Para más información sobre el cambio de tamaño de una imagen, consulta Reducción del tamaño de una imagen.

La propiedad Image del objeto ImagePaint se establece en la versión de tamaño reducido de la imagen y el objeto ImagePaint se establece como la pintura con la que rellenar un objeto. Después se dibuja un rectángulo que se rellena con la pintura:

Nota:

El objeto ImagePaint también se puede crear a partir de un objeto IImage mediante el método de extensión AsPaint.

Como alternativa, el método de extensión SetFillImage se puede usar para simplificar el código:

if (image != null)
{
    canvas.SetFillImage(image.Downsize(100));
    canvas.FillRectangle(0, 0, 240, 300);
}

Pintar con un patrón

La clase PatternPaint, que deriva de la clase Paint, se usa para pintar un objeto gráfico con un patrón.

La clase PatternPaint define una propiedad Pattern, de tipo IPattern, que representa el patrón que se va a pintar. La clase también tiene una propiedad IsTransparent que devuelve bool que representa si el color de segundo plano o primer plano de la pintura tiene un valor alfa inferior a 1.

Creación de un objeto PatternPaint

Para pintar un área con un patrón, crea el patrón y asígnalo a la propiedad Pattern de un objeto PatternPaint.

En el siguiente ejemplo se muestra cómo crear un patrón y rellenar un objeto con él:

IPattern pattern;

// Create a 10x10 template for the pattern
using (PictureCanvas picture = new PictureCanvas(0, 0, 10, 10))
{
    picture.StrokeColor = Colors.Silver;
    picture.DrawLine(0, 0, 10, 10);
    picture.DrawLine(0, 10, 10, 0);
    pattern = new PicturePattern(picture.Picture, 10, 10);
}

// Fill the rectangle with the 10x10 pattern
PatternPaint patternPaint = new PatternPaint
{
    Pattern = pattern
};
canvas.SetFillPaint(patternPaint, RectF.Zero);
canvas.FillRectangle(10, 10, 250, 250);

En este ejemplo, el patrón es un área de 10x10 que contiene una línea diagonal de (0,0) a (10,10) y una línea diagonal de (0,10) a (10,0). La propiedad Pattern del objeto PatternPaint se establece en el patrón y el objeto PatternPaint se establece como pintura con la que rellenar un objeto. Después se dibuja un rectángulo que se rellena con la pintura:

Nota:

El método de extensión AsPaint también se puede crear un objeto PatternPaint a partir de un objeto PicturePattern.

Pintura de un degradado

La clase GradientPaint, que se deriva de la clase Paint, es una clase base abstracta que describe un degradado, que se compone de pasos de degradado. Un GradientPaint pinta un objeto gráfico con varios colores que se mezclan entre sí a lo largo de un eje. Las clases que derivan de GradientPaint describen diferentes formas de interpretar los delimitadores de degradado, y los gráficos de .NET MAUI proporcionan las siguientes pinturas degradadas:

• LinearGradientPaint, que pinta un objeto con un degradado lineal. Para obtener más información, consulta Pintura con un degradado lineal.
• RadialGradientPaint, que pinta un objeto con un degradado radial. Para obtener más información, consulta Pintura con un degradado radial.

La clase GradientPaint define la propiedad GradientStops, de tipo PaintGradientStop, que representa los delimitadores de degradado del pincel, cada una de las cuales especifica un color y un desplazamiento a lo largo del eje de degradado.

Delimitadores de degradado

Los delimitadores de degradado son los bloques de creación de un degradado y especifican los colores y su ubicación a lo largo del eje de degradado. Los delimitadores de degradado se especifican mediante objetos PaintGradientStop.

La clase PaintGradientStop define las propiedades siguientes:

• Color, de tipo Color, que representa el color del delimitador de degradado.
• Offset, de tipo float, que representa la ubicación del delimitador de degradado dentro del vector de degradado. Los valores válidos están en el intervalo 0.0-1.0. Cuanto más se acerque a 0 este valor, más cerca del inicio del degradado está el color. Del mismo modo, cuanto más se acerque a 1 el valor, más cerca del final del degradado está el color.

Importante

El sistema de coordenadas usado por los degradados es relativo a un cuadro de límite para el objeto gráfico. 0 indica un 0 por ciento del rectángulo de selección, mientras que 1 indica un 100 por cien del rectángulo de selección. Por lo tanto, (0,5,0,5) describe un punto en medio del cuadro de límite y (1,1) describe un punto en la parte inferior derecha del cuadro de límite.

Los delimitadores de degradado se pueden agregar a un objeto GradientPaint con el método AddOffset.

En el siguiente ejemplo se crea un LinearGradientPaint diagonal con cuatro colores:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    StartPoint = new Point(0, 0),
    EndPoint = new Point(1, 1)
};

linearGradientPaint.AddOffset(0.25f, Colors.Red);
linearGradientPaint.AddOffset(0.75f, Colors.Blue);

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);                                                     

El color de cada punto entre los delimitadores de degradado se interpola linealmente como una combinación del color especificado por los dos delimitadores de degradado limítrofes. En el diagrama siguiente se muestra los delimitadores de degradado del ejemplo anterior:

En este diagrama, los círculos marcan la posición de los delimitadores de degradado y una línea discontinua muestra el eje de degradado. El primer delimitador de degradado especifica el color amarillo con un desplazamiento de 0.0. El segundo delimitador de degradado especifica el color rojo con un desplazamiento de 0.25. Los puntos entre estos dos delimitadores de degradado cambian gradualmente de amarillo a rojo a medida que te mueves de izquierda a derecha a lo largo del eje de degradado. El tercer delimitador de degradado especifica el color azul con un desplazamiento de 0.75. Los puntos entre el segundo y el tercer delimitador de degradado cambian gradualmente de rojo a azul. El cuarto delimitador de degradado especifica el color verde lima con un desplazamiento de 1.0. Los puntos entre el tercer y el cuarto delimitador de degradado cambian gradualmente de azul a verde lima.

Pintura con un degradado lineal

La clase LinearGradientPaint, que se deriva de la clase GradientPaint, pinta un objeto gráfico con un degradado lineal. Un degradado lineal combina dos o más colores a través de una línea conocida como el eje de degradado. Se usan objetos PaintGradientStop para especificar los colores en el degradado y sus posiciones. Para más información sobre los objetos PaintGradientStop, consulta Pintar con un degradado.

La clase LinearGradientPaint define las propiedades siguientes:

• StartPoint, de tipo Point, que representa las coordenadas bidimensionales iniciales del degradado lineal. El constructor de clase inicializa esta propiedad en (0,0).
• EndPoint, de tipo Point, que representa las coordenadas bidimensionales finales del degradado lineal. El constructor de clase inicializa esta propiedad en (1,1).

Creación de un objeto LinearGradientPaint

Los delimitadores de degradado de un degradado lineal se sitúan a lo largo del eje de degradado. La orientación y el tamaño del eje de degradado se pueden cambiar con las propiedades StartPoint y EndPoint. Manipulando estas propiedades, puedes crear degradados horizontales, verticales y diagonales, invertir la dirección del degradado, comprimir la expansión del degradado, etc.

Las propiedades StartPoint y EndPoint son relativas al objeto gráfico que se está pintando. El punto (0,0) representa la esquina superior izquierda del objeto que se pinta, mientras que (1,1) representa la esquina inferior del objeto que se pinta. En el diagrama siguiente se muestra el eje de degradado para un pincel de degradado lineal diagonal:

En este diagrama, la línea discontinua muestra el eje de degradado, que resalta su trazado de interpolación desde el punto inicial hasta el punto final.

Creación de un degradado lineal horizontal

Para crear un degradado lineal horizontal, crea un objeto LinearGradientPaint y establece sus propiedades StartColor y EndColor. Luego, establece su EndPoint en (1,0).

En el ejemplo siguiente se muestra cómo se crea un LinearGradientPaint horizontal:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(1, 0)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado lineal que se interpola horizontalmente de amarillo a verde:

Creación de un degradado lineal vertical

Para crear un degradado lineal vertical, crea un objeto LinearGradientPaint y establece sus propiedades StartColor y EndColor. Luego, establece su EndPoint en (0,1).

En el siguiente ejemplo se muestra cómo crear un LinearGradientPaint vertical:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(0, 1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado lineal que se interpola verticalmente de amarillo a verde:

Creación de un degradado lineal diagonal

Para crear un degradado lineal diagonal, crea un objeto LinearGradientPaint y establece sus propiedades StartColor y EndColor.

En el siguiente ejemplo se muestra cómo crear un LinearGradientPaint diagonal:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    // EndPoint is already (1,1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado lineal que se interpola diagonalmente de amarillo a verde:

Pintar con un degradado radial

La clase RadialGradientPaint, que deriva de la clase GradientPaint, pinta un objeto gráfico con un degradado radial. Un degradado radial combina dos o más colores a través de un círculo. Se usan objetos PaintGradientStop para especificar los colores en el degradado y sus posiciones. Para más información sobre los objetos PaintGradientStop, consulta Pintar con un degradado.

La clase RadialGradientPaint define las propiedades siguientes:

• Center, de tipo Point, que representa el punto central del círculo para el degradado radial. El constructor de la clase inicializa esta propiedad en (0.5,0.5).
• Radius, de tipo double, que representa el radio del círculo para el degradado radial. El constructor de la clase inicializa esta propiedad en 0.5.

Creación de un objeto RadialGradientPaint

Los delimitadores de degradado de un degradado radial se colocan a lo largo de un eje de degradado definido por un círculo. El eje de degradado radia desde el centro del círculo hasta su circunferencia. La posición y el tamaño del círculo se pueden cambiar con las propiedades Center y Radius. El círculo define el punto final del degradado. Por lo tanto, un delimitador de degradado en 1.0 define el color en la circunferencia del círculo. Un delimitador de degradado en 0.0 define el color en el centro del círculo.

Para crear un degradado radial, crea un objeto RadialGradientPaint y establece sus propiedades StartColor y EndColor. Después, establece sus propiedades Center y Radius.

En el siguiente ejemplo se muestra cómo crear un elemento RadialGradientPaint centrado:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue
    // Center is already (0.5,0.5)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado radial que se interpola de rojo a azul oscuro. El centro del degradado radial se coloca en el centro del rectángulo:

En el ejemplo siguiente el centro del degradado radial se mueve hasta la esquina superior izquierda del rectángulo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(0.0, 0.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado radial que se interpola de rojo a azul oscuro. El centro del degradado radial se coloca en la parte superior izquierda del rectángulo:

En el ejemplo siguiente se mueve el centro del degradado radial a la esquina inferior derecha del rectángulo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(1.0, 1.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

En este ejemplo, el rectángulo redondeado se pinta con un degradado radial que se interpola de rojo a azul oscuro. El centro del degradado radial se coloca en la parte inferior derecha del rectángulo: