.NET: Gerando imagens dinamicamente

Uma das características do .NET Framework é o GDI+ (uma classe desenvolvida para criar bitmaps). Você pode usar o GDI+ em suas aplicações Windows e Asp.NET para gerar imagens dinâmicas.

por Rodrigo Kono

Uma das características do .NET Framework é o GDI+ (uma classe desenvolvida para criar bitmaps). Você pode usar o GDI+ em suas aplicações Windows e Asp.NET para gerar imagens dinâmicas.

Em geral, usando o código GDI+ para desenhar gráficos dinamicamente se torna um pouco lento o tanto que usando imagens estáticas. Porém, temos muito mais liberdade. Por exemplo, você pode criar um gráfico para um relatório de acordo com o seu login ou um banner comercial de acordo com os dados trazidos do banco de dados. Além disso, podemos também misturar textos, figuras e outros bitmaps para criar uma figura completa.

Desenho Simples

Existem quatro passos básicos que precisamos seguir quando utilizamos o GDI+.O primeiro de todos é você tem que criar uma imagem em memória. Esse é o esboço da criação da sua "obra-prima". Para criar um bitmap, você declara uma nova instancia da classe system.drawing.bitmap.

Imports System.Drawing

Você precisa especificar a altura e largura da imagem em pixels. Tome cuidado para não gerar uma imagem grande demais, pois você pode fazer com que o programa precise de uma grande quantidade de memória e a imagem gerada irá ser muito pesada.

"Quando a imagem é desenhada, cria-se na memória o bitmap
"O bitmap é de 300px de largura e 50px de altura
Dim imagem As New Bitmap(300, 50)

O próximo passo é criar a imagem usando o recurso gráfico do GDI+, que é representado pela namespace System.Drawing.Graphics. Esse objeto possui métodos que lhe permite formar na memória todo o conteúdo do bitmap. Para criar um objeto Graphics a partir de um objeto Bitmap existente, você simplesmente irá usar o método Graphics.FromImage().

Dim g As Graphics = Graphics.FromImage(imagem)

Agora vem a parte interessante! Usando a classe Graphics você pode desenhar textos, figuras e imagens no bitmap.

Veja a lista dos métodos da classe Graphics no link:

http://msdn.microsoft.com/library/en-us/cpref/html/frlrfSystemDrawingGraphicsMethodsTopic.asp?frame=true

Os métodos iniciados com a palavra "Draw" são os que formam os desenhos em memória, enquanto os métodos iniciados pela palavra "fill" são os que preenchem e fixam-a. Existe uma exceção para o método DrawString() que preenche um texto com a fonte especificada e para os métodos que copiam imagens bitmap como o DrawIcon() e o DrawImage().

Quando chamamos os métodos da classe Graphics, você irá precisar especificar alguns parâmetros como as coordenadas em pixels do desenho a ser formado. Por exemplo: para desenhar um retângulo precisamos especificar o local (margen topo e margem esquerda), a largura e a altura. Além disso podemos escolher entre usar Pen ou Brush, onde ambos provém de vários tipos de cores.

Como mostra abaixo:

"Desenha o retângulo iniciando do local(x,y)
"largura de 300 pixels e altura de 50 pixels
g.FillRectangle(Brushes.Yellow, 0, 0, 300, 50)

Uma vez formada a imagem, podemos enviar o resultado para o browser usando o método Image.Save(). De forma conceitual, você "salva" a imagem no browser através do response.stream, ou seja, é enviado para o cliente formada no browser.

"Cria a imagem para no HTML via stream
imagem.Save(Response.OutputStream, Imaging.ImageFormat.Gif)

Ao terminar libere o objeto.

g.Dispose()
imagem.Dispose()

Inserindo figura e texto

Usando as técnicas que utilizamos anteriormente, vamos inserir um texto no nosso possível banner e uma logo do DevGoiânia .NET.

Veja bem o exemplo abaixo:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        "Quando a imagem é desenhada, cria-se na memória o bitmap
        "O bitmap é de 300px de largura e 50px de altura
        Dim imagem As New Bitmap(468, 60)

        "Pega o conteúdo do bitmap
        Dim g As Graphics = Graphics.FromImage(imagem)

        "Desenha o retângulo iniciando do local(0,0)
        "largura de 300 pixels e altura de 50 pixels
        g.FillRectangle(Brushes.White, 0, 0, 468, 60)
        g.DrawRectangle(Pens.Black, 0, 0, 467, 59)

        "Escolha da fonte, tamanho e tipo
        Dim font As New Font("Rockwell Extra Bold", 20, FontStyle.Regular)
   	  "Insere o texto usando a fonte específica
        g.DrawString("DevGoiânia .NET", font, Brushes.DarkSlateBlue, 16, 16)

        "Insere o gif escolhido dentro da imagem
        Dim Icone As Image
        Icone = Image.FromFile(Server.MapPath("devgoiania.gif"))
        g.DrawImageUnscaled(Icone, 295, 7)

        "Cria a imagem para no HTML via stream
        imagem.Save(Response.OutputStream, Imaging.ImageFormat.Gif)

        g.Dispose()
        imagem.Dispose()
End Sub

No exemplo acima eu inseri a imagem devgoiania.gif

E usei a fonte: "Rockwell Extra Bold". No caso você poderia usar a fonte que mais lhe agradar. Só devemos nos alertar para um detalhe: a imagem é gerada no servidor! Então lembre de verificar se a fonte usada está no seu server.

O resultado final é um banner como esse:

Pronto! Mas você ainda não deve estar achando legal, pois percebeu que nenhum outro objeto html é mostrado no browser. O método Image.Save() tem um pequeno problema. Pelo simples fato da imagem ser gerada no server e enviada ao browser através do Response.OutputStream, todo o conteúdo da página é sobreposto pela imagem que acabara de se formar.

Mas felizmente existe uma solução! Você pode gerar a imagem usando as tags <img> e inserir um link também. Criando um Web User Control (poderíamos até tomar a liberdade de chamar de Image User Control) ou uma própria página .aspx. Ou seja, a partir daí dá pra se notar que não tem nada de "espetacular", basta digitar no código html a tag <img src=""> e no src coloca-se o endereço da página que gera o gráfico. Ficando assim: <IMG src="bnDevGoiania_01.aspx" border="0">.

É isso pessoal.

Leia também o artigo do meu amigo Ramon Durães, aonde ele fala sobre os gráficos usando a classe mencionada nesse artigo.
A URL é: http://www.linhadecodigo.com.br/artigos.asp?id_ac=361&pag=1

Finalizando gostaria de deixar claro para vocês a forma de se trabalhar com a classe System.Drawing, gerando imagens que poderão ser gráficos, banners ou bitmaps em geral. E que todas as informações aqui sejam o chute inicial para que vocês aprofundem mais os conhecimentos com o Graphics.

Grande abraço!

Feliz 2005 a todos os leitores do Linha de Código.

Até a próxima.

Rodrigo Kono
Microsoft Student Ambassador Gold
INETA User Group Relations Comitee - www.ineta.org/latam
DevGoiânia User Group Leader - www.devgoiania.net