Esse artigo faz parte da revista Clube Delphi Edição 61. Clique aqui para ler todos os artigos desta edição

 

 

Atenção: por essa edição ser muito antiga não há arquivo pdf para download desta revista. os artigos disponíveis somente em doc.

 

Dicas

Criando gráficos com Canvas

 

Olá amigos delphianos! Em edições anteriores,foram apresentados artigos contendo dicas sobre vários assuntos: Rave Reports, IntraWeb, dbExpress etc. Baseado nessa ideia de dicas rápidas e simples, mas também sabendo que as mesmas são
usadas em aplicações maiores e que há muitos detalhes que podem ser melhor explorados no Delphi, traremos frequentemente artigos explorando em maior profundidade o uso de componentes e boas técnicas de programação.

Vamos iniciar vendo como usar a classe TCanvas, presente como propriedade em vários componentes da VCL.O Canvas permite, entre outras coisas, que sejam feitos"desenhos"direta mente na tela, como apresentação de textos ou imagens. Veremos neste artigo como construir um gráfico de barras, que represente as quantidades vendidas de um produto num período de 12 meses.

 

Criando um gráfico usando Canvas

 

Inicialmente criaremos um novo projeto VCL no Delphi. Usaremos aqui o Delphi 2005, mas o exemplo também pode ser feito em versões anteriores do produto. Adicione um PageControl no formulário configurando seu Align como all-eft. Adicione uma aba e inclua um Button e um ffod/oGroup,adicionando na propriedade Items os valores: "Escala pelo Total" e "Escala pelo Maior" Adicione no formulário um Image, com a propriedade Align como alClient.

Adicione na seção type da unit os tipos declarados na Listagem 1. Essa mesma listagem já contém as variáveis e métodos que você deve adicionar na seção private da classe do formulário (explicaremos a seguir os códigos utilizados).

Para simularas vendas de um produto, usamos um array A primeira coluna conterá a quantidade vendida no mês, correspondente a linha da matriz. A segunda conterá o total acumulado desde o primeiro mês até o mês atual.A variável Tot armazenará o acumulado anual.As quantidades mensais de vendas serão números gerados aleatoriamente, realizada pelo um método CriarVendas (Listagem 2).

O desenho do gráfico das barras propriamente dito será realizado em duas etapas: desenhar os eixos e a escala do gráfico (lembra do RadioGroup7) e desenhar as barras de acordo com os valores.

Desenhando os eixos do gráfico

A primeira etapa será realizada pelo método MontarEixos (Listagem 3), que verifica qual a opção selecionada para determinar a escala do gráfico. Os comandos utilizados atribuem valores para algumas das propriedades do Canvas, criando os eixos X e Y e incluindo textos do menor valor na escala (zero) e maior valor. Aqui
reside a "pegadinha" de trabalhar diretamente com o Canvas: nossa visão de gráfico é sempre da esquerda para a direita e de baixo para cima.Contudo,é preciso saber que as coordenadas de posicionamento dentro da área do Canvas são relativas ao canto superior esquerdo (coordenadas 0,0).    r

A propriedade Pen representa a "caneta'; o traço que será feito. O MoveTo (x,y) efetua o posicionamento da"caneta"na posição indicada nesse caso a posicionamos na parte inferior esquerda do Canvas Em seguida chamamos o método LineTo (x,y) que desenhará uma linha reta nos valores passados como parâmetro, criando o eixo horizontal Com um processo igual criamos o eixo vertical.

O TextOut(x,y,Texto) imprime o parâmetro Texto na posição indicada. A saída desse método também deixa atualizada a variável Escala declarada no formulário, necessária para o desenho das barras no gráfico.

Nota: A largura do Image deve ter no mínimo 450 pixeis para que a linha apareça completa.

...
Quer ler esse conteúdo completo? Tenha acesso completo