Gráficos

Navegue pelo exemplo

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) fornece uma tela de gráficos de plataforma cruzada na qual os gráficos 2D podem ser desenhados usando tipos do Microsoft.Maui.Graphics namespace. Esta tela suporta desenhar e pintar formas e imagens, operações de composição e transformações de objetos gráficos.

Há muitas semelhanças entre a funcionalidade fornecida pelo Microsoft.Maui.Graphicse a funcionalidade fornecida pelas formas e pincéis do .NET MAUI. No entanto, cada um é voltado para cenários diferentes:

• Microsoft.Maui.Graphics A funcionalidade deve ser consumida em uma tela de desenho, permite que gráficos eficientes sejam desenhados e fornece uma abordagem conveniente para escrever controles baseados em gráficos. Por exemplo, um controle que replica o perfil de contribuição do GitHub pode ser implementado mais facilmente usando do que usando Microsoft.Maui.Graphics formas MAUI do .NET.
• As formas do .NET MAUI podem ser consumidas diretamente em uma página e os pincéis podem ser consumidos por todos os controles. Essa funcionalidade é fornecida para ajudá-lo a produzir uma interface do usuário atraente.

Para obter mais informações sobre formas MAUI do .NET, consulte Formas.

Desenhar gráficos

No .NET MAUI, o permite o GraphicsView consumo de Microsoft.Maui.Graphics funcionalidade. GraphicsView Define a Drawable propriedade, do tipo IDrawable, que especifica o conteúdo que será desenhado pelo controle. Para especificar o conteúdo que será desenhado, você deve criar um objeto que deriva de IDrawable, e implementar seu Draw método:

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

O Draw método tem ICanvas e RectF argumentos. O ICanvas argumento é a tela de desenho na qual você desenha objetos gráficos. O RectF argumento é um struct que contém dados sobre o tamanho e a localização da tela de desenho.

Em XAML, o objeto pode ser declarado como um recurso e, em seguida, consumido por um GraphicsView especificando sua chave como o IDrawable valor da Drawable propriedade:

<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 obter mais informações sobre o GraphicsView, consulte GraphicsView.

Tela de desenho

O GraphicsView controle fornece acesso a um ICanvas objeto, por meio de seu IDrawable objeto, no qual propriedades podem ser definidas e métodos invocados para desenhar objetos gráficos. Para obter informações sobre como desenhar em um ICanvas, consulte Desenhar objetos gráficos.

ICanvas define as seguintes propriedades que afetam a aparência de objetos que são desenhados na tela:

• Alpha, do tipo float, indica a opacidade de um objeto.
• Antialias, do tipo bool, especifica se a suavização de borda está habilitada.
• BlendMode, do tipo BlendMode, define o modo de mesclagem, que determina o que acontece quando um objeto é renderizado sobre um objeto existente.
• DisplayScale, do tipo float, representa o fator de dimensionamento para dimensionar a interface do usuário em uma tela.
• FillColor, do tipo Color, indica a cor usada para pintar o interior de um objeto.
• Font, do tipo IFont, define a fonte ao desenhar o texto.
• FontColor, do tipo Color, especifica a cor da fonte ao desenhar texto.
• FontSize, do tipo float, define o tamanho da fonte ao desenhar texto.
• MiterLimit, do tipo float, especifica o limite do comprimento da esquadria das junções de linha em um objeto.
• StrokeColor, do tipo Color, indica a cor usada para pintar o contorno de um objeto.
• StrokeDashOffset, do tipo float, especifica a distância dentro do padrão de traço onde um traço começa.
• StrokeDashPattern, do tipo float[], especifica o padrão de traços e lacunas que são usados para destacar um objeto.
• StrokeLineCap, do tipo LineCap, descreve a forma no início e no final de uma linha.
• StrokeLineJoin, do tipo , especifica o tipo LineJoinde junção que é usado nos vértices de uma forma.
• StrokeSize, do tipo float, indica a largura do contorno de um objeto.

Por padrão, um ICanvas define StrokeSize como 1, para preto, StrokeLineJoin StrokeColor para e StrokeLineCap para LineJoin.MiterLineJoin.Cap.

Estado da tela de desenho

A tela de desenho em cada plataforma tem a capacidade de manter seu estado. Isso permite que você persista o estado gráfico atual e restaure-o quando necessário.

No entanto, nem todos os elementos da tela são elementos do estado gráfico. O estado dos gráficos não inclui objetos de desenho, como caminhos, e objetos de pintura, como gradientes. Os elementos típicos do estado dos gráficos em cada plataforma incluem dados de traçado e preenchimento e dados de fonte.

O estado gráfico de cada um ICanvas pode ser manipulado com os seguintes métodos:

• SaveState, que salva o estado gráfico atual.
• RestoreState, que define o estado dos gráficos para o estado salvo mais recentemente.
• ResetState, que redefine o estado dos gráficos para seus valores padrão.