Desenhando Gráficos no VB

Desenhando gráficos e funções

O Visual Basic fornece muitas possibilidades de desenhar gráficos : linhas , curvas , caixas , etc. Geralmente os gráficos são feitos através dos objetos Printer , Form ou Picture . Eles representam a superfície as quais os gráficos podem ser aplicados.

Os métodos para desenhar gráficos que o VB suporta são :

Circle - desenha um círculo ou uma elipse.
Cls - limpa todos os gráficos.
Line - desenha uma linha reta.
PaintPicture - desenha o conteúdo de um arquivo gráfico.
Point - retorna a cor de um ponto.
Print - usado para imprimir.
Pset - define a cor de um pixel definido.

As propriedades gráficas que o VB suporta são:

AutoRedraw - Determina se o gráfico será automaticamente redesenhado se algo se mover na para sua frente.
ClipControls - Determina como o repaint do gráfico será gerenciado.
DrawMode - Define a aparência do método gráfico
DrawStyle - Define o estilo da linha para saída de um método gráfico.
DrawWidth - Define a largura da linha para saída de um método gráfico.
FillColor - Define a cor usada para preencher círculos , linhas e caixas.
FillStyle - Define o padrão usado para preencher círculos , linhas e caixas.
FontTransparent - Determina se a fonte é impressa com o fundo transparente.
Palette - Define a imagem contendo a paleta a ser usada para um controle.
PaletteMode - Determina qual paleta usar para o controle em um objeto.
RightToLeft - Indica a direção de exibição do texto.
ScaleHeight - Define a altura de um área.
ScaleLeft - Define o valor inicial para a esquerda da área.
ScaleTop - Define o valor inicial para o topo da área.
ScaleWidth - Define a largura da área.
ScaleMode - Define a unidade de escala a ser usada.

Cada método gráfico tem sua saída para um formulário, um picture box ou para o objeto Printer. Para indicar onde você quer desenhar , informe antes do método gráfico o nome do objeto usado. Se você omitir o objeto o VB assume que você quer desenhar no formulário onde o código esta anexado. Ex:

Um formulário chamado meuForm
```
MeuForm.PSet (500, 500)
```
Um controle picture box chamado picPicture1
```
picPicture1.PSet (500, 500)
```
O formulário atual
```
PSet (500, 500)
```

Cada área de desenho tem seu próprio sistema de coordenadas que termina qual unidade aplicar para as coordenadas.

Desenhando Linhas e formas

Podemos desenhar pontos , linhas e formas com os métodos gráficos do VB. Para desenhar uma linha entre duas coordenadas usamos o método Line que tem a seguinte sintaxe:

object.Line [Step] (x1, y1) [Step] - (x2, y2), [color], [B][F]

Onde:

Parte	Descrição
object	Indica o objeto a qual o gráfico será aplicado.
Step	Especifica que o ponto inicial das coordenadas é relativo a posição atual do gráfico dada pelas propriedades CurrentX e CurrentY .
(x1, y1)	Valor que indica as coordenadas do ponto inicial para a linha .(A propriedade ScaleMode determina a unidade de medida usada.). Obrigatório.
Step	Indica que o ponto final das coordenadas é relativo para ponto inicial.
(x2, y2)	Valor que indica as coordenadas do ponto final da linha a ser desenhada.
color	Valor que indica a cor usada para desenhar a linha.Você pode usar a função RGB a funcção QBColor
B	Se incluído desenha uma caixa usando as coordenas.
F	Se B for usado F indica que a caixa será preenchida com a mesma cor usada para desenhar a caixa.

Para desenhar uma linha somente o segundo par de coordenadas é obrigatório e os valores de x e y podem ser inteiros ou fracionários. Exemplo que desenha uma linha inclinada:

Line (500, 500)–(2000, 2000)

O código abaixo desenha várias linhas de largura diferentes:

Private Sub Form_Click ()
   DrawWidth = 1
   Line (100, 1000)–(3000, 1000)
   DrawWidth = 5
   Line (100, 1500)–(3000, 1500)
   DrawWidth = 8
   Line (100, 2000)–(3000, 2000)
End Sub

Desta forma o VB desenha uma linha que inclue o primeiro ponto final , mas não o último ponto. Para desenhar o último ponto podemos usar o método Pset:

PSet [Step] (0, 0)[, color]

Como o primeiro par de coordenadas é opcional , se você omití-lo o VB usa o objeto atual x e y como ponto final. A posição atual pode ser definida pelas propriedades CurrentX e CurrentY. Para desenhar um triângulo podemos usar a conexão com três pontos:

' define a coordenada x do ponto de inicioCurrentX = 1500' define a coordenada y do ponto de inicio.CurrentY = 500' desenha uma linha para abaixo e a direita do ponto de inicio.Line -(3000, 2000)' desenha uma linha para a esquerda do ponto atualLine -(1500, 2000)' desenha uma linha para cima e a direita do ponto inicial.Line -(1500, 500)

Os métodos Pset , Line e Circle podem usar a palavra chave Setp que define que o local do ponto é relativo ao último ponto desenhado; O VB adiciona os valores de x e y ao último ponto desenhado. Ex:

Line (100, 200)–(150, 250)           é igual a        Line (100, 200)–Step(50, 50)

Para aplicar cor você usa o argumento color . Para desenhar um linha azul fazemos:

Line (500, 500)–(2000, 2000), RGB(0, 0, 255)

Se você omitir o argumento color a propriedade Forecolor definida será usada como cor.

Para limpar a área de de desenho basta usar o método Cls. A sintaxe é :

[object.]Cls

Trabalhando com escalas

Um dos primeiros conceitos que você deve compreender ao trabalhar com gráficos no VB é o conceito de escala. O tamanho de um objeto ou gráfico na tela depende da unidade de medida que você escolheu para criá-lo. As unidades de medidas mais usadas são : polegadas , centímetros , milímetros e pixels. Além destas medidas o VB suporta outras unidades de medidas que servem para medir o tamanho de um objeto são elas:

Points - 72 points formam uma polegada. Geralmente é usada para fontes de texto.

Twips - Existem 1440 twips em uma polegada. Esta medida fornece mais precisão para medidas do que Points ( 1 twip = 1/20 de um Point) , tornando possível gráficos mais precisos.

Characters - Utiliza twips fixos : 120 twips na horizontal por 240 twips na vertical . Não é muito utilizada.

User - Tipo definido pelo usuário. Uma unidade muito poderosa que você pode usar como uma escala. Você define o número de unidades dentro da área ( altura : de cima até embaixo e largura : da esquerda para a direita).

Junto com esta propriedades a propriedade ScaleMode identifica qual unidade vai ser usada. Desde que você defina a propriedade ScaleMode o VB ajusta as propriedades de tamanho da área para se adequar a seleção definida.

Quando você cria gráficos eles serão criados na área cliente de uma janela, e, em geral você estará usando uma posição x/y dentro desta área para direcionar o VB onde ele vai colocar o gráfico. Os limites da área cliente são definidos pelas propriedades ScaleWidth e ScaleHeight. Para definir as coordenadas superior/esquerda iniciais você usa as propriedades : ScaleTop e ScaleLeft. Isto pode ser útil se você sabe que a equação do seu gráfico somente se aplica a uma área a alguma distância da coordenada original ( x=0 e y=0)

Usando os métodos Gráficos

Se não considerarmos o objeto Print podemos dizer que temos 6 métodos gráficos que já foram mencionados no início deste artigo. A seguir vou dar mais alguns detalhes sobre os mais importantes destes métodos:

Nota: Para testar os códigos de cada exemplo abaixo crie um projeto no VB e no formulário padrão insira um objeto Picture com o nome de Picture1.

Circle - A sintaxe do método é : objeto.circle (XCenter, YCenter), Radius, Color
O código abaixo desenha 20 círculos. Eu estou movendo progressivamente o centro para a direita começando na coordenada X=500

For i = 1 to 2000 Step 100
picture1.circle (i + 500, 1000), 400, vbGreen
Next i
Cls - Sintaxe : objeto.Cls
Apaga todos os gráficos que foram desenhados no objeto.
```
Ex: picture1.cls
```
Line - A sintaxe é : object.Line [Step] (x1, y1) [Step] - (x2, y2), [color], [B][F]
O código abaixo cria 20 linhas verticais posicionadas da esquerda para a direita.

For i = 1 to 1000 Step 100
picture1.line (i+500,500)-(i+500,4000), vbBlue
Next i

Para desenhar caixas basta incluir um argumento como mostrado no código a seguir:

For i = 1 To 4000 Step 400
Picture1.Line (i + 200, 500)-(i + 400, 1000), vbBlue, BF
Next i

O argumento BF incluído no final do código diz ao VB para desenhar caixas preenchidas.

Pset - Sintaxe : objeto.PSet (x, y), QBColor(Cor)

Pset é o método mais básico que o VB oferece para desenhar. Usando Pset você pode definir a cor de qualquer ponto dentro de uma área. Por exemplo , o código abaixo obtêm cores e coordenadas aleatórias:

Private Sub Command1_Click()

Dim x as integer
Dim y as integer
Dim iColor as Integer

For i = 1 To 1000
'obtem cores aleatórias entre 0 to 15
   iColor = (Int(10 * Rnd) + 0)
   'define X de 0 até ScaleWidth
   x = (Int((Picture1.ScaleWidth * Rnd) + 0))
   'define Y de 0 até ScaleHeight
   y = (Int((Picture1.ScaleHeight * Rnd) + 0))
   'imprime os pontos no picturebox
   Picture1.PSet (x, y), QBColor(iColor)
Next i
End Sub

PictureBox preenchida com os pontos desenhados por Pset.

Pset é poderoso , você pode desenhar qualquer coisa com ele. Você só tem que controlar a localização de cada ponto.

Você já percebeu que o ponto forte do VB não são os métodos gráficos. Na realidade eles são muito simples , mas nem tudo esta perdido. Você pode criar gráficos mais sofisticados usando as API´s do Windows.

Percebendo a lacuna a Microsoft criou as DLL´s conhecidas como DirectX que podem ser usadas para obter efeitos gráficos complexos e com bom desempenho. (Vamos falar sobre o DirectX em um outro artigo.)

Para terminar o artigo vou mostrar como você pode criar um projeto no VB para desenha equações matemáticas. Vai ser um projeto simples para lhe dar a idéia de como você pode trabalhar com os métodos aqui descritos. Abaixo temos o formulário do projeto:

Olhando para o formulário acima temos:

Um controle pictureBox - picture1
7 botões de comando (command1,command2,..até command7) . Cada botão irá desenhar o gráfico da função exibida em sua propriedade Caption

O código que esta no formulário é o seguinte :

Option Explicit
Dim i As Integer
Dim x As Single
Dim y As Single

Private Sub Command1_Click()
' Desenha y = 4 * sin(x).
Picture1.ForeColor = vbBlue
x = -10
y = 4 * Sin(x)
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = -10 To 10 Step 0.25
y = 4 * Sin(x)
Picture1.Line -(x, y)
Next x
End Sub

Private Sub Command2_Click()
' Desenha y = x ^ 3 / 5 - 3 * x + 1.
Picture1.ForeColor = vbYellow
x = -10
y = x ^ 3 / 5 - 3 * x + 1
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = -10 To 10 Step 0.25
y = x ^ 3 / 5 - 3 * x + 1
Picture1.Line -(x, y)
Next x
End Sub

Private Sub Command3_Click()

' Desenha y = x^2
Picture1.ForeColor = vbRed
x = -10
y = x ^ 2
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = -10 To 10 Step 0.25
y = x ^ 2
Picture1.Line -(x, y)
Next x

End Sub

Private Sub Command4_Click()
Unload Me
End Sub

Private Sub Command5_Click()

' Desenha y = x^3
Picture1.ForeColor = vbCyan
x = -10
y = x ^ 3
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = -10 To 10 Step 0.25
y = x ^ 3
Picture1.Line -(x, y)
Next x

End Sub

Private Sub Command6_Click()

' Desenha y = cos(x)
Picture1.ForeColor = vbGreen
x = -10
y = Cos(x)
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = -10 To 10 Step 0.25
y = Cos(x)
Picture1.Line -(x, y)
Next x
End Sub

Private Sub Command7_Click()
' desenha y = cos(x)
Picture1.ForeColor = vbGreen
x = 0
y = x * Sqr(1 + x)
Picture1.CurrentX = x
Picture1.CurrentY = y
For x = 0 To 10 Step 1
y = x * Sqr(1 + x)
Picture1.Line -(x, y)
Next x
End Sub

Private Sub Form_Load()

Picture1.Scale (-10, 10)-(10, -10)

' desenha o eixo X
Picture1.Line (-10, 0)-(10, 0), , BF

For i = -9 To 9
' Picture1.Line (i, -0.5)-(i, 0.5)
Next i

' Desenha o eixo Y
Picture1.Line (0, -10)-(0, 10)
For i = -9 To 9
' Picture1.Line (-0.5, i)-(0.5, i)
Next i

End Sub

O funcionamento é bem simples:

No evento Load do formulário os eixos X e Y são desenhados
Cada botão desenha o gráfico de uma função usando o método Line em um laço For/Next

O resultado produzido após clicar em todos os botões será:

Fique a vontade para melhorar o código e criar um super programa para desenhar funções matemáticas.

Se você não sabe por onde começar vou deixar abaixo três links para você pegar programas prontos que fazem exatamente isto. Estude o código com dedicação e aprenda como fazer.

- Gera gráficos de funções matemáticas em duas dimensões - Gráfico 2D - vbmat2D1.zip
- Gera gráficos de funções matemáticas em duas dimensões - Gráfico 2D - vbmat2D.zip
- Gera gráficos de funções matemáticas em três dimensões - Gráfico 2D - vbmat3D.zip

Até o próximo artigo VB.

Josè Carlos Macoratti