- 16.01 Introdução
- 16.02 Contexto Gráficos e Objetos Gráficos
- 16.03 Controle de Cores
- 16.04 Controles de Fontes
- 16.05 Desenhando Linhas, Retângulos e Elipses
- 16.06 Desenhando Arcos
- 16.07 Desenhando Polígonos e Linhas Poligonais
- 16.08 Recursos Gráficos Avançados
- 16.09 Introdução à Multimídia
- 16.10 Carregando, Exibindo e Mudando a Escala de imagens
- 16.11 Animando uma Série de Imagens
- 16.12 Windows Media Player
- 16.13 Microsoft Agent
Neste capítulo teremos uma visão geral das ferramentas do C# para desenhar figuras bidimensionais e para controlar cores e fontes.
O C# suporta elementos gráficos que permitem aos programadores aprimorar seus aplicativos Windows visualmente.
A FCL contém muitos recursos de desenho sofisticados como parte do espaço de nomes System.Drawing e dos outros espaços de nomes que constituem o recurso .NET GDI+, uma extensão da Graphical Device Interface,
é uma interface de programação de aplicativos que fornece classes para criar elementos gráficos vetoriais bidimensionais, manipular fontes e inserir imagens.
A GDI+ estende a GDI simplificando o modelo de programação e introduzindo vários recursos novos, como os caminhos gráficos com suporte para formato de arquivos de imagem estendido e combinação alfa.
Começaremos com uma introdução aos recursos de desenho da plataforma .NET. Em seguida apresentaremos recursos de desenho mais poderosos, como a mudança dos estilos das linhas usadas para desenhar figuras e o controle das cores e padrões de figuras preenchidas.
Um contexto gráfico do C# representa uma superfície de desenho que permite desenhar na tela. Um objeto Graphics gerencia um contexto gráfico controlando o modo como a informação é desenhada. Os objetos Graphics contêm métodos para desenho, manipulação de fontes, manipulação de cores e outras ações relacionadas aos elementos gráficos. Todo aplicativo Windows derivado da classe System.Windows.Forms herda um manipulador de evento virtual OnPaint em que a maioria das operações gráficas é executada.
Os programadores poucas vezes chamam o método OnPaint diretamente, pois o desenho de elementos gráficos é um processo dirigido por eventos.
Se você precisa fazer o método OnPaint ser executado explicitamente, não chame o método OnPaint, Em vez disso, chame o método Invalidate. Esse método atualiza a área cliente de um controle e repinta implicitamente todos os componentes gráficos.
As cores podem melhorar a aparência de um programa e ajudar a transmitir um significado. A estrutura Color define métodos e constantes usados para manipular cores. Como se trata de um objeto leve que executa apenas algumas operações e armazena campos static, Color é implementada como uma estrutura, e não como uma classe.
Qualquer cor pode ser criada a partir de uma combinação dos componentes alfa, vermelho, verde e azul. Juntos, esses componentes são chamados de valores ARGB. Todos os quatro componentes ARGB são bytes que representam valores inteiros no intervalo de 0 a 255. O valor alfa determina a opacidade da cor.
Constantes static da estrutura Color e seus valores RGB.
| Constantes na estrutura Color | Valor RGB | Constantes na estrutura Color | ValorRGB |
|---|---|---|---|
| Orange | 255, 200, 0 | White | 255, 255, 255 |
| Pink | 255, 175, 175 | Gray | 128, 128, 128 |
| Cyan | 0, 255, 255 | DarkGray | 64, 64, 64 |
| Magenta | 255, 0, 255 | Red | 255, 0, 0 |
| Yellow | 255, 255, 0 | Green | 0, 255, 0 |
| Black | 0, 0, 0 | Blue | 0, 0, 255 |
Membros da estrutura Color.
| Métodos e propriedades da estrutura Color | Descrição |
|---|---|
| Métodos comuns | |
| static FromArgb | Cria uma cor baseada nos valores de vermelho, verde e azul. |
| static FromName | Cria uma cor a partir de um nome, passado como string |
| Propriedades comuns | |
| A | byte entre 0 e 255, representando o componentes alfa |
| R | byte entre 0 e 255, representando o componentes vermelho |
| G | byte entre 0 e 255, representando o componentes verde |
| B | byte entre 0 e 255, representando o componentes azul |
Todas as classes derivadas da classe abstrata Brush definem objetos que colorem o interior das figuras gráficas.
Classes derivadas da classe Brush.
| Classe | Descrição |
|---|---|
| HatchBrush | Usa um pincel retangular para preencher uma região com um padrão. |
| LinearGradientBrush | Preenche uma região com uma transformação gradual de uma cor em outra. |
| SolidBrush | Preenche uma região com uma cor. Definido por um objeto Color. |
| TextureBrush | Preenche uma região repetindo na superfície um objeto Image especificado. |
- Fig. 16.06: ShowColors.cs
Usando diferentes cores em C#.
O componente GUI predefinido ColorDialog é uma caixa de diálogo que permite aos usuários fazerem uma seleção em uma paleta de cores disponíveis. Ela também oferece a opção de criar cores personalizadas.
- Fig. 16.07: ShowColorsComplex.cs
Muda as cores de fundo e de texto de um formulário.
Esta seção apresenta métodos e constantes relacionadas ao controle de fontes. Uma vez criado um objeto Font, suas propriedades não podem ser modificadas. Se os programadores quiserem uma fonte diferente, devem criar um novo objeto Font.
Propriedades somente de leitura da classe Font
| Propriedade | Descrição |
|---|---|
| Bold | Testa uma fonte quanto ao estilo negrito. |
| FontFamily | Representa a FontFamily da Font |
| Height | Representa a altura da fonte. |
| Italic | Testa uma fonte quanto ao estilo itálico |
| Name | Representa o nome da fonte como uma string |
| Size | Retorna um valor float indicando o tamanho atual da fonte, medido em unidades de projeto. |
| SizeInPoints | Retorna um valor float indicando o tamanho atual da fonte, medido em pontos. |
| Strikeout | Testa uma fonte quanto ao estilo taxado. |
| Underline | Testa uma fonte quanto ao estilo sublinhado. |
- Fig. 16.09: UsingFonts.cs
Demonstrando várias configurações de fonte.
Os programadores podem definir informações precisas sobre as métricas de uma fonte, como a altura, a haste descendente, a haste ascendente e o entrelinhamento.
A classe FontFamily define características comuns a um grupo de fontes relacionadas. A classe FontFamily fornece vários métodos usados para determinar as métricas da fonte, que são compartilhados pelos membros de uma família em particular.
Métodos de FontFamily que retornam informações sobre as métricas da fonte.
| Método | Descrição |
|---|---|
| GetCellAscent | Retorna um int representando a haste ascendente de uma fonte, medida em unidades de projeto. |
| GetCellDescent | Retorna um int representando a haste descendente de uma fonte, medida em unidades de projeto. |
| GetEmHeight | Retorna um int representando a altura de uma fonte, medida em pontos de projeto. |
| GetLineSpacing | Retorna um int representando a distância entre duas linhas consecutivas de texto, medida em unidades de projeto. |
- Fig. 16.12: UsingFontMetrics.cs
Exibindo informações sobre métricas de fontes.
Esta seção apresenta uma variedade de métodos Graphics para desenhar linhas, retângulos e elipses. Cada um dos métodos de desenho tem várias versões sobrecarregadas. Ao empregarmos métodos que desenham contornos de figura, usamos versões que recebem um objeto Pen e quatro valores int.
Métodos Graphics que desenham linhas, retângulos e elipses.
| Métodos Graphics de desenho e descrição |
|---|
| Nota: muitos destes métodos são sobrecarregados. |
| DrawLine (Pen p, int x1, int y1, int x2, int y2) |
| Desenha uma linha de (x1, y1) a (x2, y2). O objeto Pen determina a cor, o estilo e a largura da linha. |
| DrawRectangle (Pen p, int x, int y, int width, int height) |
| Desenha um retângulo com a largura e a altura especificadas. O canto superior esquerdo do retângulo está no ponto (x, y). O objeto Pen determina a cor, o estilo e a largura da linha. |
| FillRectangle (Brush b, int x, int y, int width, int height) |
| Desenha um retângulo sólido com a largura e a altura especificadas. O canto superior esquerdo do retângulo está no ponto (x, y). O objeto Pen determina a cor, o estilo e a largura da linha. |
| DrawEllipse (Pen p, int x, int y, int width, int height ) |
| Desenha uma elipse dentro de um retângulo. A largura e a altura do retângulo são conforme especificado, e seu canto superior esquerdo está no ponto (x, y). O objeto Pen determina a cor, o estilo e a largura da linha. |
| FillEllipse(Brush b, int x, int y, int width, int height) |
| Desenha uma elipse preenchida dentro de um retângulo. A largura e a altura do retângulo são conforme especificado, e seu canto superior esquerdo está no ponto (x, y). O objeto Brush determina o padrão dentro da elipse. |
- Fig. 16.14: LinesRectanglesOvals.cs
Demonstrando linhas, retângulos e elipse.
Os arcos são partes de elipses e são medidos em graus, começando em um ângulo inicial e continuando por um número especificado de graus, chamado de ângulo do arco. Diz-se que um arco varre (percorre) seu ângulo a partir de seu ângulo inicial.
Ângulos de arco positivo e negativo.
| Métodos Graphics e descrição |
|---|
| Nota: muitos desses métodos são sobrecarregados |
| DrawArc (Pen p, int x, int y, int width, int height, int startAngle, int sweepAngle) |
| Desenha um arco de uma elipse, começando no ângulo startAngle e varrendo sweepAngle graus. |
| DrawPie (Pen p, int x, int y, int width, int height, int startAngle, int sweepAngle) |
| Desenha uma seção de torta de uma elipse, começando no ângulo startAngle e varrendo sweepAngle graus. |
| FillPie (Brush b, int x, int y, int width, int height, int startAngle, int sweepAngle) |
| Funciona de modo análogo a DrawPie, exceto que desenha um arco sólido. |
- Fig. 16.18: DrawArcs.cs
Desenhando vários arcos em um formulário.
Polígonos são figuras de vários lados. Existem vários métodos Graphics usados para desenhar polígonos: DrawLines desenha uma série de pontos conectados, DrawPolygon desenha um polígono fechado e FillPolygon desenha um polígono sólido.
Métodos Graphics para desenhar polígonos.
| Método | Descrição |
|---|---|
| DrawLines | Desenha uma série de linhas conectadas. As coordenadas de cada ponto são especificadas em um array de Points. Se o último ponto é diferente do primeiro, a figura não é fechada. |
| DrawPolygon | Desenha um polígono. As coordenadas de cada ponto são especificadas em um array de Points. Esse método desenha um polígono fechado, mesmo que o último ponto seja diferente do primeiro. |
| FillPolygon | Desenha um polígono sólido. As coordenadas de cada ponto são especificadas em um array de Points. Esse método desenha um polígono fechado, mesmo que o último ponto seja diferente do primeiro. |
- Fig. 16.20: DrawPolygons.cs
Demonstrando polígonos
O C# oferece muitos recursos gráficos adicionais. A hierarquia Brush, por exemplo, também inclui HatchBrush, LinearGradientBrush, PathGradientBrush e TextureBrush.
- Fig. 16.21: DrawShapes.cs
Desenhando várias figuras em um formulário.
Nosso próximo exemplo demonstra o uso de um caminho geral. Um caminho geral é uma figura construída a partir de linhas retas e curvas complexas. Um objeto da classe GraphicsPath representa um caminho geral. A Classe GraphicsPath fornece funcionalidade que permite a criação de figuras complexas a partir de objetos gráficos primitivos baseados em vetor.
- Fig. 16.22: DrawStarsFrom.cs
Usando caminhos para desenhar estrelas no formulário.
O C# oferece muitas maneiras de incluir imagens e animações em programas.
Nas seções restantes deste capítulo apresentaremos o uso e a manipulação de imagens e outros recursos multimídia.
Os recursos multimídia do C# incluem elementos gráficos, imagens, animações e vídeo. As seções anteriores demonstraram os recursos gráficos vetoriais do C#; esta seção se concentra na manipulação de imagens.
- Fig. 16.23: DisplayLogoForm.cs
Exibindo e redimensionando uma imagem.
O próximo exemplo anima uma série de imagens armazenadas em um array.
- Fig. 16.24: LogoAnimator.cs
Programa que anima uma série de imagens.
O exemplo a seguir demonstra os recursos da GDI+ pertencentes a um aplicativo de jogo de xadrez. Isso inclui técnicas de detecção de colisões bidimensional, a seleção de quadros individuais de uma imagem com múltiplos quadros e a invalidação regional (atualização somente das partes exigidas da tela) para aumentar desempenho. A detecção de colisões bidimensional é a detecção de uma sobreposição entre duas figuras.
-
Fig. 16.25: ChessPiece.cs
Classe de armazenamento para atributos de peças de xadrez. -
Fig. 16.26: ChessGame.cs
Código gráfico do jogo de xadrez.
O controle Windows Media Player permite que um aplicativo reproduza vídeo e som em muitos formatos multimídia. Os usuários podem encontrar áudio e vídeo na Internet ou podem criar seus próprios arquivos usando gráficos e de som disponíveis.
- Fig. 16.27: MediaPlayerTest.cs
Demonstra o controle Windows Media Player.
Microsoft Agent é uma tecnologia usada para adicionar personagens animados interativas em aplicativos. Windows ou páginas Web.
O controle Microsoft Agent fornece aos programadores quatro personagens predefinidas, um gênio, um mago, um papagaio e um robô. Cada personagem tem um conjunto exclusivo de animações que os programadores podem usar em seus aplicativos para ilustrar diferentes pontos e funções. A Microsoft fornece informações básicas sobre a tecnologia Agent em seu site Web, no endereço: <www.microsoft.com/msagent>
Para executar esse exemplo, os estudantes devem fazer o download do arquivo da personagem Peedy, de um mecanismo de texto-para-fala e de um mecanismo de reconhecimento de fala.
(Talvez seja melhor pesquisar mais sobre. Por limitações, não haverá exemplo de código)