Aprenda a Criar um Programa Paint Parecido com o do Windows
By admin
Artigo Enviado por Marcelo Tropicore
Aqui segue um exemplo de um programa inspirado no Paint do Windows .Nós vamos usar dois componentes Image da paleta Additional para representar a nossa área de desenho. Esse componente assim como todos os componentes visuais do Delphi tem uma propriedade chamada “Canvas” ,é essa propriedade que vai determinar a aparência dos componentes visuais como um Edit, Label, Image etc… Dentre as propriedades da Classe TCanvas umas das principais são: Brush, CanvasOrientation, ClipRect, CopyMOde, Font, Handle, Pen, PenPos, Pixels, Ellipse, FillRect, LineTo, MoveTo, Rectangle e uma porção de outras propriedades.
Vamos declarar duas variáveis globais do tipo TBitmap com os nomes Backbuffer e backbuffer2, essas variáveis vão gerar a nossa área de desenho (é claro que é preciso declarar outras variáveis globais para esse exemplo rodar direito,qualquer dúvida é só dar uma olhada no código fonte
) . Eu coloquei os dois Images dentro de um ScrollBox (paleta Additional) para poder redimensionar os Images sem interferir no tamanho do Form. Agora que começa a parte boa, hora de por a mão na maça, dentro do OnCreate do Form faça o seguinte.
Para podermos usar os Backbuffers temos que criar com backbuffer:= TBitmap.Create; dimensionamos ele no mesmo tamanho do Scrollbox . O backbuffer.Canvas.Brush.Color:= ClWhite; é para determinar a cor de preenchimento do backbuffer. Na parte Image1.Canvas.FillRect(Rect(0,0,Image1.width, Image1.height)); vamos Limpar toda a área do Image e finalmente mandamos o backbuffer para o Image com : Image1.Picture.Assign(backbuffer);
Vamos repetir o mesmo procedimento para o backbuffer2 com algumas coisas adicionais.Aqui nós determinamos qual vai ser a cor transparente do backbuffer2 que vai pro Image2, e em muitas vezes o Image2 vai ficar sobre o Image1 como pode ver no evento de alguns botões das ferramentas com o comando Image2.BringToFront;. Assim quando o Image2 ficar sobre o Image1 vai ser possível ver o Image1 que está por baixo. Aqui no caso eu usei a cor branca.
Inicialize as outras variáveis como no exemplo do código fonte.
ferramenta:= ‘lápis’;
StatusBar1.Panels[1].Text:= ‘Lapis’;
Shape1.Brush.Color:= cor;
E por último vamos liberar as variáveis backbuffer e backbuffer2 da memória, por enquanto não precisamos mais delas ,pois já foram carregadas para os dois Images, portanto vamos trabalhar com eles.
As ferramentas que vão utilizar o Image2 são aquelas que desenham as linhas, retângulos e elipses. Dentro do Image2 vamos utilizar três eventos , o OnMouseDown, OnMouseMove e OnMouseUp. O componente Image é como um plano cartesiano, se você não matou as suas aulas de matemática sabe do que eu estou falando hehehe, ele tem duas dimensões , o X e o Y.
No OnMouseDown nós vamos pegar a posição X e Y que o usuário clicou dentro do Image2. Dai fazemos o seguinte, Image2.Canvas.MoveTo(X,Y); , com isso nós movemos a posição do ponto de partida de uma linha por exemplo ,não começamos a desenhar ainda só dizemos a propriedade Canvas do Image onde vai começar a linha.
No OnMouseMove nós usamos as variáveis X e Y do OnMouseDown e criamos uma linha (se o usuário selecionou essa ferramenta)dessa posição até a posição atual no OnMouseMove.
Image2.Canvas.MoveTo(posX2,posY2);
Note que antes de usar esse comando eu usei o Image2.Canvas.FillRect(Rect(0,0,Image2.Width,Image2.Height)); Para limpar o que já tinha sido desenhado antes, se não fizermos isso o Image2 vai desenhando um monte de linha uma atrás da outra, e fica um monte de linha desenhada no Image. Por isso eu usei dois Images , um para guardar o desenho e o outro para mostrar só o traçado da linha , se eu tivesse usado o Canvas.FillRect(); no Image1 a cada evento do OnMouseMove seria apagado todo o desenho principal.
No OnMouseUp quando o usuário solta o botão do mouse , o programa já tem a posição inicial e final da linha e faz o desenho no Image1 que é o desenho principal.
begin
Image1.Canvas.MoveTo(posX2,posY2);
Image1.Canvas.LineTo(posX,posY);
posX3:= x;
posY3:= y;
end;
Algumas ferramentas não utilizam o Image2 pois desenha direto no Image1 que são a ferramenta Lápis, Borracha, Spray e os baldes de tinta. No caso dos baldes de tinta eu não consegui achar nenhum comando que conseguisse fazer igual ao do Paint do Windows, então tive usar uma lógica meio maluca mesmo pra conseguir chegar o mais peto que eu pude, se alguém sabe como fazer isso por favor me diga como hehehe.
Bom é isso aí pessoal , eu passei o básico de algumas funcionalidades do programa dentro da propriedade Canvas do componente Image, o programa tem outras funções bem legais como abrir imagens e poder editar, salvar e também redimensionar o tamanho da área de desenho.
Se alguém quiser entrar em contato para tirar dúvidas é só mandar no meu email, marcelo_tropicore@hotmail.com
Baixe os Fontes Aqui: paint.
“Uma mente que se abre para uma nova idéia nunca voltará ao seu tamanho original”.
código fonte , exemplo , Image , paint , TBitmap , TCanvas , windows 







maio 10th, 2009