Graphics

Visualizar a amostra

.NET Multi-platform App UI (.NET MAUI) fornece uma tela multiplataforma onde gráficos 2D podem ser desenhados usando tipos do namespace Microsoft.Maui.Graphics. Essa tela dá suporte a desenho e pintura de formas e imagens, composição de operações e transformações de objeto gráfico.

Há muitas semelhanças entre a funcionalidade fornecida por Microsoft.Maui.Graphics, e a funcionalidade fornecida por formas e pincéis MAUI do .NET. No entanto, cada um é destinado a cenários diferentes:

• Microsoft.Maui.Graphics A funcionalidade deve ser consumida em um canvas de desenho, permite que gráficos de alto desempenho sejam desenhados e fornece uma abordagem conveniente para desenvolver controles baseados em gráficos. Por exemplo, um controle que replica o perfil de contribuição do GitHub pode ser implementado com mais facilidade usando Microsoft.Maui.Graphics do que usando formas MAUI do .NET.
• As formas MAUI do .NET 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, GraphicsView habilita o consumo de funcionalidades do Microsoft.Maui.Graphics. 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 do qual deriva IDrawablee 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 o local da tela de desenho.

No XAML, o IDrawable objeto pode ser declarado como um recurso e, em seguida, consumido por um GraphicsView especificando sua chave como o 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 as propriedades podem ser definidas e os 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 dos objetos desenhados na tela:

• Alpha, do tipo float, indica a opacidade de um objeto.
• Antialias, do tipo bool, especifica se o anti-aliasing está habilitado.
• BlendMode, do tipo BlendMode, define o modo de mistura, 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 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 miter de 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 em que um traço começa.
• StrokeDashPattern, do tipo float[], especifica o padrão de traços e lacunas que são usados para descrever um objeto.
• StrokeLineCap, do tipo LineCap, descreve a forma no início e no final de uma linha.
• StrokeLineJoin, do tipo LineJoin, especifica o tipo de 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 para 1, StrokeColor para preto, StrokeLineJoin para LineJoin.Miter, e StrokeLineCap para LineJoin.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 gráfico não inclui objetos de desenho, como caminhos e objetos de pintura, como gradientes. Elementos típicos do estado gráfico em cada plataforma incluem dados de traço 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 gráfico como o estado salvo mais recentemente.
• ResetState, que redefine o estado gráfico para seus valores padrão.