GraphicsView

Examina la muestra

.NET Multi-platform App UI (.NET MAUI) GraphicsView es un lienzo gráfico en el que se pueden dibujar gráficos 2D mediante tipos del espacio de nombres Microsoft.Maui.Graphics. Para más información sobre Microsoft.Maui.Graphics, consulta Gráficos.

GraphicsView define la propiedad Drawable, de tipo IDrawable, que especifica el contenido que se dibujará. Esta propiedad está respaldada por una propiedad BindableProperty, lo que significa que puede ser el destino del enlace de datos y aplicar estilos.

GraphicsView define los siguientes eventos:

• StartHoverInteraction, con TouchEventArgs, que se genera cuando un puntero entra en el área de prueba de posicionamiento de GraphicsView.
• MoveHoverInteraction, con TouchEventArgs, que se genera cuando un puntero se mueve mientras el puntero permanece dentro del área de prueba de posicionamiento de GraphicsView.
• EndHoverInteraction, que se genera cuando un puntero deja el área de prueba de posicionamiento de GraphicsView.
• StartInteraction, con TouchEventArgs, que se genera cuando se presiona GraphicsView.
• DragInteraction, con TouchEventArgs, que se genera cuando se arrastra GraphicsView.
• EndInteraction, con TouchEventArgs, que se genera cuando se libera la presión que generó el evento StartInteraction.
• CancelInteraction, que se genera cuando la presión que hizo contacto con GraphicsView pierde contacto.

Creación de una GraphicsView

GraphicsView debe definir un objeto IDrawable que especifique el contenido que se dibujará en el control. Esto se puede lograr mediante la creación de un objeto que deriva de IDrawable y mediante la implementación de 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. Para más información sobre cómo dibujar en un objeto ICanvas, consulta Dibujar objetos gráficos.

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>

Posición y tamaño de objetos gráficos

La ubicación y el tamaño de ICanvas en una página se pueden determinar examinando las propiedades del argumento RectF en el método Draw.

La estructura RectF define las propiedades siguientes:

• Bottom, de tipo float, que representa la coordenada y del borde inferior del lienzo.
• Center, de tipo PointF, que especifica las coordenadas del centro del lienzo.
• Height, de tipo float, que define la altura del lienzo.
• IsEmpty, de tipo bool, que indica si el lienzo tiene un tamaño cero y una ubicación.
• Left, de tipo float, que representa la coordenada x del borde izquierdo del lienzo.
• Location, de tipo PointF, que define las coordenadas de la esquina superior izquierda del lienzo.
• Right, de tipo float, que representa la coordenada x del borde derecho del lienzo.
• Size, de tipo SizeF, que define la anchura y la altura del lienzo.
• Top, de tipo float, que representa la coordenada y del borde superior del lienzo.
• Width, de tipo float, que define el ancho del lienzo.
• X, de tipo float, que define la coordenada x de la esquina superior izquierda del lienzo.
• Y, de tipo float, que define la coordenada y de la esquina superior izquierda del lienzo.

Estas propiedades se pueden usar para colocar y ajustar el tamaño de los objetos gráficos en ICanvas. Por ejemplo, los objetos gráficos se pueden colocar en el centro de Canvas mediante el uso de los valores Center.X y Center.Y como argumentos para un método de dibujo. Para información sobre cómo dibujar en un ICanvas, consulta Dibujar objeto gráficos.

Invalidar el lienzo

GraphicsView tiene un método Invalidate que informa al lienzo de que debe volver a dibujarse. Este método debe invocarse en una instancia de GraphicsView:

graphicsView.Invalidate();

.NET MAUI invalida automáticamente GraphicsView según sea necesario en la interfaz de usuario. Por ejemplo, cuando el elemento se muestra por primera vez, entra en la vista o se revela moviendo un elemento desde la parte superior, se vuelve a dibujar. La única vez que necesitas llamar a Invalidate es cuando quieres forzar a que GraphicsView se vuelva a dibujar, por ejemplo, si ha cambiado su contenido mientras sigue visible.