Compartilhar via

Pintar objetos gráficos

  • Artigo

Browse sample. Navegue pelo exemplo

Os gráficos .NET Multi-Platform App UI (.NET MAUI) incluem a capacidade de pintar objetos gráficos com cores sólidas, gradientes, imagens repetidas e padrões.

A Paint classe é uma classe abstrata que pinta um objeto com sua saída. Classes que derivam de descrevem diferentes maneiras de Paint pintar um objeto. A lista a seguir descreve os diferentes tipos de tinta disponíveis em elementos gráficos do .NET MAUI:

Instâncias desses tipos podem ser pintadas em um , normalmente usando o método para definir a tinta como o SetFillPaint preenchimento de um ICanvasobjeto gráfico.

A Paint classe também define BackgroundColor, e propriedades, do tipo Color, que podem ser usadas para definir opcionalmente cores de plano de fundo e ForegroundColor primeiro plano para um Paint objeto.

Pinte uma cor sólida

A SolidPaint classe, que é derivada da Paint classe, é usada para pintar um objeto gráfico com uma cor sólida.

A SolidPaint classe define uma Color propriedade, do tipo Color, que representa a cor da tinta. A classe também tem uma IsTransparent propriedade que retorna um que representa se a cor tem um bool valor alfa menor que 1.

Criar um objeto do SolidPaint

A cor de um objeto é normalmente especificada por meio de seu construtor, usando um SolidPaintColor argumento:

SolidPaint solidPaint = new SolidPaint(Colors.Silver);

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

O SolidPaint objeto é especificado como o primeiro argumento para o SetFillPaint método. Portanto, um retângulo arredondado preenchido é pintado com um objeto prateado SolidPaint :

Screenshot of a rounded rectangle, filled with a silver SolidPaint object.

Como alternativa, a cor pode ser especificada com a Color propriedade:

SolidPaint solidPaint = new SolidPaint
{
    Color = Colors.Silver
};

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

Pintar uma imagem

A ImagePaint classe, que é derivada da Paint classe, é usada para pintar um objeto gráfico com uma imagem.

A ImagePaint classe define uma Image propriedade, do tipo IImage, que representa a imagem a ser pintada. A classe também tem uma IsTransparent propriedade que retorna false.

Criar um objeto ImagePaint

Para pintar um objeto com uma imagem, carregue a imagem e atribua-a Image à propriedade do ImagePaint objeto.

Observação

O carregamento de uma imagem incorporada em um assembly requer que a imagem tenha sua ação de compilação definida como Recurso Incorporado.

O exemplo a seguir mostra como carregar uma imagem e preencher um retângulo com ela:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    ImagePaint imagePaint = new ImagePaint
    {
        Image = image.Downsize(100)
    };
    canvas.SetFillPaint(imagePaint, RectF.Zero);
    canvas.FillRectangle(0, 0, 240, 300);
}

Neste exemplo, a imagem é recuperada do assembly e carregada como um fluxo. A imagem é redimensionada usando o método, com o Downsize argumento especificando que sua maior dimensão deve ser definida como 100 pixels. Para obter mais informações sobre como reduzir o tamanho de uma imagem, consulte Reduzir o tamanho de uma imagem.

A Image propriedade do ImagePaint objeto é definida como a versão reduzida da imagem e o ImagePaint objeto é definido como a tinta com a qual preencher um objeto. Em seguida, é desenhado um retângulo preenchido com a tinta:

Screenshot of a rectangle, filled with an image.

Observação

Um ImagePaint objeto também pode ser criado a partir de um IImage objeto pelo método de AsPaint extensão.

Como alternativa, o método de extensão pode ser usado para simplificar o SetFillImage código:

if (image != null)
{
    canvas.SetFillImage(image.Downsize(100));
    canvas.FillRectangle(0, 0, 240, 300);
}

Pintar um padrão

A PatternPaint classe, que é derivada da Paint classe, é usada para pintar um objeto gráfico com um padrão.

A PatternPaint classe define uma Pattern propriedade, do tipo IPattern, que representa o padrão a ser pintado. A classe também tem uma IsTransparent propriedade que retorna um que representa se a cor de plano de fundo ou primeiro plano da tinta tem um bool valor alfa menor que 1.

Criar um objeto PatternPaint

Para pintar uma área com um padrão, crie o padrão e atribua-o Pattern à propriedade de um PatternPaint objeto.

O exemplo a seguir mostra como criar um padrão e preencher um objeto com ele:

IPattern pattern;

// Create a 10x10 template for the pattern
using (PictureCanvas picture = new PictureCanvas(0, 0, 10, 10))
{
    picture.StrokeColor = Colors.Silver;
    picture.DrawLine(0, 0, 10, 10);
    picture.DrawLine(0, 10, 10, 0);
    pattern = new PicturePattern(picture.Picture, 10, 10);
}

// Fill the rectangle with the 10x10 pattern
PatternPaint patternPaint = new PatternPaint
{
    Pattern = pattern
};
canvas.SetFillPaint(patternPaint, RectF.Zero);
canvas.FillRectangle(10, 10, 250, 250);

Neste exemplo, o padrão é uma área de 10x10 que contém uma linha diagonal de (0,0) a (10,10) e uma linha diagonal de (0,10) a (10,0). A Pattern propriedade do PatternPaint objeto é definida como o padrão e o PatternPaint objeto é definido como a tinta com a qual preencher um objeto. Em seguida, é desenhado um retângulo preenchido com a tinta:

Screenshot of a rectangle, filled with a silver pattern.

Observação

Um PatternPaint objeto também pode ser criado a partir de um PicturePattern objeto pelo método de AsPaint extensão.

Pintar um gradiente

A GradientPaint classe, que é derivada da Paint classe, é uma classe base abstrata que descreve um gradiente, que é composto de etapas de gradiente. Um GradientPaint pinta um objeto gráfico com várias cores que se misturam umas às outras ao longo de um eixo. Classes que derivam de descrever diferentes maneiras de interpretar gradientes pára e .NET MAUI gráficos fornece as seguintes tintas de GradientPaint gradiente:

A GradientPaint classe define a GradientStops propriedade, do tipo PaintGradientStop, que representa as paradas de gradiente do pincel, cada uma das quais especifica uma cor e um deslocamento ao longo do eixo do gradiente.

Marcas de gradiente

As paradas de gradiente são os blocos de construção de um gradiente e especificam as cores no gradiente e sua localização ao longo do eixo do gradiente. As paradas de gradiente são especificadas usando PaintGradientStop objetos.

A PaintGradientStop classe define as seguintes propriedades:

  • Color, do tipo Color, que representa a cor da parada de gradiente.
  • Offset, do tipo float, que representa o local da parada de gradiente dentro do vetor de gradiente. Os valores válidos estão no intervalo de 0,0 a 1,0. Quanto mais próximo esse valor estiver de 0, mais próxima a cor estará do início do gradiente. Da mesma forma, quanto mais próximo esse valor estiver de 1, mais próxima a cor estará do final do gradiente.

Importante

O sistema de coordenadas usado por gradientes é relativo a uma caixa delimitadora para o objeto gráfico. 0 indica 0% da caixa delimitadora e 1 indica 100% da caixa delimitadora. Portanto, (0,5,0,5) descreve um ponto no meio da caixa delimitadora e (1,1) descreve um ponto no canto inferior direito da caixa delimitadora.

As paradas de gradiente podem ser adicionadas a um GradientPaint objeto com o AddOffset método.

O exemplo a seguir cria uma diagonal LinearGradientPaint com quatro cores:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    StartPoint = new Point(0, 0),
    EndPoint = new Point(1, 1)
};

linearGradientPaint.AddOffset(0.25f, Colors.Red);
linearGradientPaint.AddOffset(0.75f, Colors.Blue);

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

A cor de cada ponto entre paradas de gradiente é interpolada como uma combinação da cor especificada pelas duas paradas de gradiente delimitadoras. O diagrama a seguir mostra as paradas de gradiente do exemplo anterior:

Screenshot of a rounded rectangle, filled with a diagonal LinearGradientPaint.

Neste diagrama, os círculos marcam a posição das paradas de gradiente e a linha tracejada mostra o eixo do gradiente. A primeira parada de gradiente especifica a cor amarela em um deslocamento de 0,0. A segunda parada de gradiente especifica a cor vermelha em um deslocamento de 0,25. Os pontos entre essas duas paradas de gradiente mudam gradualmente de amarelo para vermelho à medida que você se move da esquerda para a direita ao longo do eixo do gradiente. A terceira parada de gradiente especifica a cor azul em um deslocamento de 0,75. Os pontos entre a segunda e a terceira marca de gradiente mudam gradualmente de vermelho para azul. A quarta parada de gradiente especifica a cor verde limão no deslocamento de 1,0. Os pontos entre a terceira e a quarta marca de gradiente mudam gradualmente de azul para verde-limão.

Pintar um gradiente linear

A LinearGradientPaint classe, que é derivada da classe, pinta GradientPaint um objeto gráfico com um gradiente linear. Um gradiente linear combina duas ou mais cores ao longo de uma linha conhecida como eixo do gradiente. PaintGradientStop objetos são usados para especificar as cores no gradiente e suas posições. Para obter mais informações sobre PaintGradientStop objetos, consulte Pintar um gradiente.

A LinearGradientPaint classe define as seguintes propriedades:

  • StartPoint, do tipo Point, que representa as coordenadas bidimensionais iniciais do gradiente linear. O construtor de classe inicializa essa propriedade para (0,0).
  • EndPoint, do tipo Point, que representa as coordenadas bidimensionais finais do gradiente linear. O construtor de classe inicializa essa propriedade para (1,1).

Criar um objeto LinearGradientPaint

As paradas de gradiente de um gradiente linear são posicionadas ao longo do eixo do gradiente. A orientação e o tamanho do eixo do gradiente podem ser alterados usando as StartPoint propriedades e EndPoint . Ao manipular essas propriedades, você pode criar gradientes horizontais, verticais e diagonais, inverter a direção do gradiente, condensar a propagação do gradiente e muito mais.

As StartPoint propriedades e EndPoint são relativas ao objeto gráfico que está sendo pintado. (0,0) representa o canto superior esquerdo do objeto que está sendo pintado e (1,1) representa o canto inferior direito do objeto que está sendo pintado. O diagrama a seguir mostra o eixo de gradiente para um pincel de gradiente linear diagonal:

The gradient axis for diagonal linear gradient.

Neste diagrama, a linha tracejada mostra o eixo do gradiente, que destaca o caminho de interpolação do gradiente do ponto inicial ao ponto final.

Criar um gradiente linear horizontal

Para criar um gradiente linear horizontal, crie um LinearGradientPaint objeto e defina suas StartColor e EndColor propriedades. Em seguida, defina como EndPoint (1,0).

O exemplo a seguir mostra como criar um horizontal LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(1, 0)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente linear que interpola horizontalmente de amarelo para verde:

Screenshot of a rounded rectangle, filled with a horizontal linear gradient.

Criar um gradiente linear vertical

Para criar um gradiente linear vertical, crie um LinearGradientPaint objeto e defina suas StartColor e EndColor propriedades. Em seguida, defina como EndPoint (0,1).

O exemplo a seguir mostra como criar uma vertical LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(0, 1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente linear que interpola verticalmente de amarelo para verde:

Screenshot of a rounded rectangle, filled with a vertical linear gradient.

Criar um gradiente linear diagonal

Para criar um gradiente linear diagonal, crie um LinearGradientPaint objeto e defina suas StartColor e EndColor propriedades.

O exemplo a seguir mostra como criar uma diagonal LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    // EndPoint is already (1,1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente linear que interpola diagonalmente de amarelo para verde:

Screenshot of a rounded rectangle, filled with a diagonal linear gradient.

Pintar um gradiente radial

A RadialGradientPaint classe, que é derivada da classe, pinta GradientPaint um objeto gráfico com um gradiente radial. Um gradiente radial combina duas ou mais cores em um círculo. PaintGradientStop objetos são usados para especificar as cores no gradiente e suas posições. Para obter mais informações sobre PaintGradientStop objetos, consulte Pintar um gradiente.

A RadialGradientPaint classe define as seguintes propriedades:

  • Center, do tipo Point, que representa o ponto central do círculo para o gradiente radial. O construtor de classe inicializa essa propriedade para (0.5,0.5).
  • Radius, do tipo double, que representa o raio do círculo para o gradiente radial. O construtor de classe inicializa essa propriedade para 0.5.

Criar um objeto RadialGradientPaint

As paradas de gradiente de um gradiente radial são posicionadas ao longo de um eixo de gradiente definido por um círculo. O eixo do gradiente irradia do centro do círculo para sua circunferência. A posição e o tamanho do círculo podem ser alterados usando as Center propriedades e Radius . O círculo define o ponto final do gradiente. Portanto, uma parada de gradiente em 1,0 define a cor na circunferência do círculo. Uma parada de gradiente em 0,0 define a cor no centro do círculo.

Para criar um gradiente radial, crie um RadialGradientPaint objeto e defina suas StartColor e EndColor propriedades. Em seguida, defina suas Center e Radius propriedades.

O exemplo a seguir mostra como criar um centralizado RadialGradientPaint:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue
    // Center is already (0.5,0.5)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente radial que interpola de vermelho para azul escuro. O centro do gradiente radial é posicionado no centro do retângulo:

Screenshot of a rounded rectangle, filled with a centered radial gradient.

O exemplo a seguir move o centro do gradiente radial para o canto superior esquerdo do retângulo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(0.0, 0.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente radial que interpola de vermelho para azul escuro. O centro do gradiente radial está posicionado no canto superior esquerdo do retângulo:

Screenshot of a rounded rectangle, filled with a top-left radial gradient.

O exemplo a seguir move o centro do gradiente radial para o canto inferior direito do retângulo:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(1.0, 1.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Neste exemplo, o retângulo arredondado é pintado com um gradiente radial que interpola de vermelho para azul escuro. O centro do gradiente radial está posicionado na parte inferior direita do retângulo:

Screenshot of a rounded rectangle, filled with a bottom-right radial gradient.