Gráficos

Examina la muestra

.NET Multi-platform App UI (.NET MAUI) proporciona un lienzo gráfico multiplataforma en el que se pueden dibujar gráficos 2D mediante tipos del espacio de nombres Microsoft.Maui.Graphics. Este lienzo admite formas e imágenes de dibujo y pintura, operaciones de composición y transformaciones gráficas de objetos.

Hay muchas similitudes entre la funcionalidad proporcionada por Microsoft.Maui.Graphics y la funcionalidad proporcionada por formas y pinceles de .NET MAUI. Sin embargo, cada uno tiene escenarios diferentes como objetivo:

• La funcionalidad Microsoft.Maui.Graphics debe consumirse en un lienzo de dibujo, permite dibujar gráficos con rendimiento y proporciona un enfoque práctico para escribir controles basados en gráficos. Por ejemplo, un control que replica el perfil de contribución de GitHub se puede implementar más fácilmente mediante Microsoft.Maui.Graphics que mediante formas de .NET MAUI.
• Las formas de .NET MAUI se pueden consumir directamente en una página y todos los controles pueden consumir los pinceles. Esta funcionalidad se proporciona para ayudarte a generar una interfaz de usuario atractiva.

Para obtener más información sobre las formas de .NET MAUI, consulta Formas.

Dibujar gráficos

En .NET MAUI, GraphicsView permite el consumo de la funcionalidad Microsoft.Maui.Graphics. GraphicsView define la propiedad Drawable, de tipo IDrawable, que especifica el contenido que el control dibujará. Para especificar el contenido que se dibujará, debes crear un objeto que derive de IDrawable e implementar su método Draw:

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

El método Draw tiene los argumentos ICanvas y RectF. El argumento ICanvas es el lienzo de dibujo en el que se dibujan objetos gráficos. El argumento RectF es un struct que contiene datos sobre el tamaño y la ubicación del lienzo de dibujo.

En XAML, el objeto IDrawable se puede declarar como un recurso que luego GraphicsView consume especificando su clave como el valor de la propiedad Drawable:

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

Para obtener más información sobre GraphicsView, consulta GraphicsView.

Lienzo de dibujo

El control GraphicsView proporciona acceso a un objeto ICanvas, a través de su objeto IDrawable, en el que se pueden establecer propiedades y se pueden invocar métodos para dibujar objetos gráficos. Para obtener información sobre cómo dibujar en ICanvas, consulta Dibujar objetos gráficos.

ICanvas define las siguientes propiedades que afectan a la apariencia de los objetos que se dibujan en el lienzo:

• Alpha, de tipo float, indica la opacidad de un objeto.
• Antialias, de tipo bool, especifica si el suavizado de contorno está habilitado.
• BlendMode, de tipo BlendMode, define el modo de fusión, que determina lo que sucede cuando se representa un objeto encima de un objeto existente.
• DisplayScale, de tipo float, representa el factor de escalado para modificar la escala de la interfaz de usuario en un lienzo.
• FillColor, de tipo Color, indica el color usado para pintar el interior de un objeto.
• Font, de tipo IFont, define la fuente al dibujar texto.
• FontColor, de tipo Color, especifica el color de fuente al dibujar texto.
• FontSize, de tipo float, define el tamaño de la fuente al dibujar texto.
• MiterLimit, de tipo float, especifica el límite de la longitud angular de las combinaciones de línea en un objeto.
• StrokeColor, de tipo Color, indica el color usado para pintar el contorno de un objeto.
• StrokeDashOffset, de tipo float, especifica la distancia dentro del patrón de guion donde comienza un guion.
• StrokeDashPattern, de tipo float[], especifica el patrón de guiones y huecos que se usan para realizar el contorno de un objeto.
• StrokeLineCap, de tipo LineCap, describe la forma al principio y al final de una línea.
• StrokeLineJoin, de tipo LineJoin, especifica el tipo de combinación que se usa en los vértices de una forma.
• StrokeSize, de tipo float, indica el ancho del contorno de un objeto.

De forma predeterminada, ICanvas establece StrokeSize en 1, StrokeColor en negro, StrokeLineJoin en LineJoin.Miter y StrokeLineCap en LineJoin.Cap.

Estado del lienzo de dibujo

El lienzo de dibujo en cada plataforma tiene la capacidad de mantener su estado. Esto te permite conservar el estado gráfico actual y restaurarlo cuando sea necesario.

Sin embargo, no todos los elementos del lienzo son elementos del estado gráfico. El estado gráfico no incluye objetos de dibujo, como rutas y objetos de pintura, como degradados. Los elementos típicos del estado gráfico en cada plataforma incluyen datos de trazo y relleno, y datos de fuente.

El estado gráfico de cada ICanvas se puede manipular con los métodos siguientes:

• SaveState, que guarda el estado gráfico actual.
• RestoreState, que establece el estado gráfico en el estado guardado más recientemente.
• ResetState, que restablece el estado de los gráficos a sus valores predeterminados.