Condividi tramite

GraphicsView

  • Articolo

Browse sample. Esplorare l'esempio

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) GraphicsView è un'area di disegno grafica in cui è possibile disegnare grafica 2D usando i tipi dello spazio dei Microsoft.Maui.Graphics nomi. Per altre informazioni su Microsoft.Maui.Graphics, vedere Grafica.

GraphicsView definisce la Drawable proprietà di tipo IDrawable, che specifica il contenuto che verrà disegnato. Questa proprietà è supportata da un BindablePropertyoggetto , il che significa che può essere la destinazione del data binding e stili.

GraphicsView definisce gli eventi seguenti:

  • StartHoverInteraction, con TouchEventArgs, che viene generato quando un puntatore entra nell'area hit test dell'oggetto GraphicsView.
  • MoveHoverInteraction, con TouchEventArgs, che viene generato quando un puntatore si sposta mentre il puntatore rimane all'interno dell'area di hit test di GraphicsView.
  • EndHoverInteraction, che viene generato quando un puntatore lascia l'area di hit test dell'oggetto GraphicsView.
  • StartInteraction, con TouchEventArgs, che viene generato quando viene premuto .GraphicsView
  • DragInteraction, con TouchEventArgs, che viene generato quando l'oggetto GraphicsView viene trascinato.
  • EndInteraction, con TouchEventArgs, che viene generato quando viene rilasciata la pressione che ha generato l'evento StartInteraction .
  • CancelInteraction, che viene generato quando la pressione che ha fatto contatto con il GraphicsView contatto perde il contatto.

Creare un controllo GraphicsView

Un GraphicsView oggetto deve definire un IDrawable oggetto che specifica il contenuto che verrà disegnato sul controllo. A tale scopo, è possibile creare un oggetto che deriva da IDrawablee implementando il relativo Draw metodo:

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

Il Draw metodo ha ICanvas argomenti e RectF . L'argomento ICanvas è l'area di disegno in cui si disegnano oggetti grafici. L'argomento RectF è un struct oggetto che contiene dati relativi alle dimensioni e alla posizione dell'area di disegno. Per altre informazioni sul disegno su un ICanvasoggetto , vedere Disegnare oggetti grafici.

In XAML l'oggetto IDrawable può essere dichiarato come risorsa e quindi utilizzato da un GraphicsView oggetto specificandone la chiave come valore della Drawable proprietà:

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

Posizionare e ridimensionare oggetti grafici

La posizione e le dimensioni di ICanvas in una pagina possono essere determinate esaminando le proprietà dell'argomento RectF nel Draw metodo .

Lo RectF struct definisce le proprietà seguenti:

  • Bottom, di tipo float, che rappresenta la coordinata y del bordo inferiore dell'area di disegno.
  • Center, di tipo PointF, che specifica le coordinate del centro dell'area di disegno.
  • Height, di tipo float, che definisce l'altezza dell'area di disegno.
  • IsEmpty, di tipo bool, che indica se l'area di disegno ha una dimensione e una posizione pari a zero.
  • Left, di tipo float, che rappresenta la coordinata x del bordo sinistro dell'area di disegno.
  • Location, di tipo PointF, che definisce le coordinate dell'angolo superiore sinistro dell'area di disegno.
  • Right, di tipo float, che rappresenta la coordinata x del bordo destro dell'area di disegno.
  • Size, di tipo SizeF, che definisce la larghezza e l'altezza dell'area di disegno.
  • Top, di tipo float, che rappresenta la coordinata y del bordo superiore dell'area di disegno.
  • Width, di tipo float, che definisce la larghezza dell'area di disegno.
  • X, di tipo float, che definisce la coordinata x dell'angolo superiore sinistro dell'area di disegno.
  • Y, di tipo float, che definisce la coordinata y dell'angolo superiore sinistro dell'area di disegno.

Queste proprietà possono essere usate per posizionare e ridimensionare oggetti grafici in ICanvas. Ad esempio, gli oggetti grafici possono essere posizionati al centro di Canvas utilizzando i Center.X valori e Center.Y come argomenti di un metodo di disegno. Per informazioni sul disegno su un ICanvasoggetto , vedere Disegnare oggetti grafici.

Invalidare l'area di disegno

GraphicsView dispone di un Invalidate metodo che informa l'area di disegno che deve ridisegnarsi. Questo metodo deve essere richiamato in un'istanza GraphicsView di :

graphicsView.Invalidate();

.NET MAUI invalida automaticamente l'oggetto GraphicsView in base alle esigenze dell'interfaccia utente. Ad esempio, quando l'elemento viene visualizzato per la prima volta, entra in visualizzazione o viene rivelato spostando un elemento da sopra di esso, viene ridisegnato. L'unica volta che è necessario chiamare Invalidate è quando si vuole forzare il GraphicsView disegno di per ridisegnare se stesso, ad esempio se il contenuto è stato modificato mentre è ancora visibile.