As novas classes e métodos para desenho

 

Tudo o que você vê na tela do seu monitor ou imprime na sua impressora : imagens , cores e texto , passa pelas funções de tratamento da aplicação e do sistema operacional , no caso , estamos falando do Windows. A plataforma .NET trouxe muitas novidades no tratamento de imagens , desenho e texto , e  , este artigo têm a intenção de apenas dar uma pequena introdução ao assunto. (Lembre-se que não existem mais os métodos no VB.NET : Pset e Scale)

 

No VB.NET os namespaces System.Drawing e System.Drawing.Design oferecem tudo o que você precisa para  trabalhar com gráficos. Vamos dar uma olhada no namespace System.Drawing :

Vou me ater somente ao namespace System.Drawing  e System.Drawing.Drawing2D  pois eles contém as classes que são fundamentais para para a execução das tarefas comum de programação gráfica no VB.NET. Abaixo temos algumas das  principais classes destes dois namespaces:

 

Classe Decrição

Principais Classes para função de desenho
Graphics Principal classe para desenho e preenchendo de figuras
GraphicsState A classe é usada para salvar o estado do objeto Graphics.

Classes para Desenho
Pen Usada para desenhar contorno de objetos ( linhas , retângulos , elipses , etc)
Rectangle Armazena informação sobre o retângulo ( localização , largura , altura , etc..)

Classes para trabalhar com imagens
BitMap Encapsula uma imagem do tipo BitMap
Icon Encapsula uma imagem BitMap usada para representar um objeto
Image Classe abstrata usada pelas classes BitMap e Icon
Brush Usada para preencher formas com cores , texturas e modelos.
SolidBrush Usada para cores sólidas
TextureBrush Pincel feito de uma imagem
HatchBrush Cria um pincel em um modelo definido
LinearGradientBrush usada para criar um pincel que usa duas cores em um objeto
PathGradientBrush Cria um objeto do tipo Brush usado para preencher modelos

 

Toda a funcionalidade gráfica com o código gerenciado da plataforma .NET acontece através da camada - GDI+ - Graphics Device Interface plus . A GDI+ é a nova API do Windows usada para fornecer as funcionalidades ao .NET Framework  para trabalhar com gráficos , imagens , impressão , etc.. Nas versões anteriores do VB  tínhamos que usar as chamadas a API WIN32.

 

O sistema de coordenadas padrão do Windows têm origem nas coordenadas (0,0) no canto superior esquerdo . O eixo X estende-se para a direita enquanto o eixo Y segue para baixo. A unidade de medida padrão do sistema de coordenadas é feita em pixel.

 

A classe Graphics é usada para tratar a maior parte dos desenhos em duas dimensões na plataforma .NET e será a classe que vamos usar para executar a maior parte das tarefas básicas relacionadas com as tarefas de desenho. Esta classe fornece os métodos para desenhar todas as formas básicas bidimensionais incluindo : linhas , retângulos , elipses , polígonos , arcos , etc.Na verdade , dependendo da figura devemos usar um método associado da classe Graphics . Ex:  Para desenhar uma linha usamos o método Drawline e para desenhar um retângulo usamos o método DrawRectangle.

 

A companheira da classe Graphics é a classe Pen . De fato para efetuar qualquer desenho iremos precisar de uma instância de Graphis e outra de Pen. A classe Pen  é usada para definir como os contornos das formas serão constituídos na interface. Como uma pena real , a classe Pen define uma cor que será usada  para fazer o desenho. Pode-se criar uma Pen baseada em uma interface Brush . Isto permite que você desenhe linhas com mais estilos.  Abaixo temos vários construtores para a classe Pen :

 

Construtor Descrição
New Pen (Color , Single ) Cria um objeto Pen baseado em uma cor (esturura Color) e a largura em pixels
New Pen (Color ) Cria um objeto Pen baseado em uma cor definida por uma estrutura Color.
New Pen (Brush , Single ) Cria um objeto Pen usando uma classe derivada da classe base Brush. A lagura da pena é definida em pixels.
New Pen (Brush) Cria um objeto Pen baseado em um objeto Brush

 

Nota : O parâmetro Color usado pelo construtor Pen é definido por uma instância da estrutura Color. Uma estrutura Color representa uma cor ARGB (Alpha , Red , Green  e Blue).

 

Uma linha é um conjunto de pixels que liga um ponto inicial a um ponto final. Os atributos de uma linha são definidos por um objeto Pen , e , como o objeto Pen pode varia em cor e largura as linhas também. Para desenhar uma linha , como eu já disse, usamos o método Drawline da classe Graphics. Vejamos um exemplo:

Public Sub DesenhaLinha(ByVal e As PaintEventArgs)

 

' Cria uma pena

Dim blackPen As New Pen(Color.Black, 3)

' Cria as coordenadas de pontos que define a linha

Dim x1 As Single = 100.0F

Dim y1 As Single = 100.0F

Dim x2 As Single = 500.0F

Dim y2 As Single = 100.0F

' Desenha a linha na tela

e.Graphics.DrawLine(blackPen, x1, y1, x2, y2)

End Sub

 

Vou mostrar agora um exemplo prático usando alguns dos objetos mencionados neste artigo. E ,  para que você possa visualizar a imagem on-line vamos criar um gráfico de barras em uma página ASP.NET usando o VB.NET.  As etapas básicas são a seguinte :

  1. Gerar um objeto Bitmap vazio com as dimensões desejadas

  2. Desenhar a imagem do gráfico no Bitmap usando o objeto Graphics usando as informações do usuário.

  3. Converter a imagem para o formato GIF

  4. Enviar a imagem GIF ao browser

Vamos ao código comentado :

 

1- Lembre-se que como estamos usando uma página ASP.NET devemos declarar qual a linguagem vamos usar. No caso VB.NET. Além disto devemos declarar quais namespaces vamos usar. No caso : System.Drawing.

<%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %> <%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %> <%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %> <%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %>

 

<%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %> <%@ Page Language="VB" %> <%@ Import Namespace="System.Drawing" %> <%@ Import Namespace="System.Drawing.Imaging" %>

Vamos salvar este arquivo com o nome de GraficoBarras.aspx. (Você pode usar o bloco de notas , ou outro editor para digitar o código acima).

 

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>

<script language="VB" runat="server">

 

No evento Load da página ASP.NET vamos colocar todo código que irá gerar o gráfico:

Sub Page_Load(sender As Object, e As EventArgs)

 

' Criamos a seguir um novo objeto BitMap informando a altura e largura do gráfico que desejamos. (a unidade é em pixel).

Dim objBitmap As New Bitmap(200,200)

 

'Criamos um objeto Graphics a fim de poder desenhar o bitmap criado usando o método FromImage do objeto Graphics

Dim objGraphic as Graphics = Graphics.FromImage(objBitmap)

 

'Agora vamos criar alguns objetos Brushers para poder 'pintar' a imagem . Criamos 4 brushes , um para cada barra do gráfico (red , blue, green) e white para a cor de fundo. Criamos também um objeto Pen para desenhar o eixo vertical e horizontal no gráfico

Dim redBrush As New SolidBrush(Color.Red)
Dim blueBrush As New SolidBrush(Color.Blue)
Dim greenBrush As New SolidBrush(Color.Green)
Dim whiteBrush As New SolidBrush(Color.White)
Dim blackPen As New Pen(Color.Black, 2)

 

'Usamos o método FillRectangle para pintar toda o fundo do gráfico de branco

objGraphic.FillRectangle(whiteBrush, 0, 0, 200, 200)

 

'A seguir usamos o método DrawLine para desenha os eixos verticais e horizontais

objGraphic.DrawLine(blackPen, New Point(0,195), New Point(195,195))

objGraphic.DrawLine(blackPen, New Point(5,5), New Point(5,200))

 

'a próxima etapa é calcular a altura de cada barra baseado na informação fornecida pelo  usuário. Usamos o método FillRectangle() para desenhar as barras.

Dim MaiorValor As Single, Altura1 As Single, Altura2 As Single, Altura3 As Single
Dim Valor1 As Single, Valor2 As Single, Valor3 As Single

Valor1 = Convert.ToSingle(Request("v1"))
Valor2 = Convert.ToSingle(Request("v2"))
Valor3 = Convert.ToSingle(Request("v3"))

If Valor1 > Valor2 Then
  MaiorValor = Valor1
Else
   MaiorValor = Valor2
End If
If Valor3 > MaiorValor Then
   MaiorValor = Valor3
End If

if MaiorValor = 0 Then MaiorValor = 1

Altura1 = (Valor1 / MaiorValor) * 190
Altura2 = (Valor2 / MaiorValor) * 190
Altura3 = (Valor3 / MaiorValor) * 190

objGraphic.FillRectangle(redBrush, 10, 194-Altura1, 50, Altura1)
objGraphic.FillRectangle(blueBrush, 70, 194-Altura2, 50, Altura2)
objGraphic.FillRectangle(greenBrush, 130, 194-Altura3, 50, Altura3)

'Alteramos o tipo de conteúdo da página (ContentType) para o Browser saber que estamos enviando de volta uma imagem GIF.

Response.ContentType = "image/gif"

 

'Salvamos o bitmap no formato GIF e devolvemos a imagem ao Browser

objBitmap.Save (Response.OutputStream, ImageFormat.Gif)

 

End Sub

</script>

 

Para exibir o gráfico de barra vamos criar outro arquivo aspx onde o usuário irá informar qual a altura de cada barra.

 

<%@ Page Language="VB" %>

<%@ Page Language="VB" %>
<html>
<body>

<form action="TesteGrafico.aspx" action="POST">
  Valor 1: <input type="text" name="v1" value="<%= Request("v1") %>"><br>
  Valor 2: <input type="text" name="v2" value="<%= Request("v2") %>"><br>
  Valor 3: <input type="text" name="v3" value="<%= Request("v3") %>"><br><br>
  <input type="submit" value="Desenhar Gráfico de Barras"><br><br>
</form>

<script language="VB" runat="server">

Dim Valor1 As Single, Valor2 As Single, Valor3 As Single

Sub Page_Load()

Try
     Valor1 = Convert.ToSingle(Request("v1"))
Catch
     Valor1 = 0
End Try

Try
    Valor2 = Convert.ToSingle(Request("v2"))
Catch
    Valor2 = 0
End Try

Try
    Valor3 = Convert.ToSingle(Request("v3"))
Catch
    Valor3 = 0
End Try

End Sub
</script>
<img src="GraficoBarras.aspx?v1=<%= Valor1 %>&v2=<%= Valor2 %>&v3=<%= Valor3 %>" width=200 height=200>
</body>
</html>

 

Salve este arquivo com o nome de TesteGrafico.aspx. Os arquivos devem ser salvos no diretório de trabalho do seu servidor web , ou no seu diretório virtual. (Geralmente o padrão é /inetpub/wwwroot/ ). Vamos os arquivos salvar na pasta Graf sob o diretório /inetpub/wwwroot. Então para gerar o gráfico vamos chamar o arquivo TesteGrafico.aspx a partir da seguinte url : http://localhost/graf/TesteGrafico.aspx:

 

Veja o resultado do processamento abaixo : (Eu acrescentei alguns detalhes para tornar mais interessante o gráfico)

 

 

Este artigo é apenas a ponta do iceberg , o assunto é muito vasto e mereceria um livro , mas creio que deu para você vislumbrar todo o potencial das novas classes e métodos para desenho no VB.NET.

O exemplo do gráfico on-line é uma pequena mostra disto. Acesse o gráfico aqui : Gráfico on-line . Até mais  ...

José Carlos Macoratti