[tutorial] desenhando com canvas (delphi) - 8º parte

e ae galera essa é ultima parte desse tutorial, nessa parte vamos criar um programa parecido com photoshop (creio que é mais parecido com o paint que o photoshop kkkk), entao abrimos o delphi e adicionamos um componente MainMenu da aba standard (esse componente sao aqueles menu fica o arquivo abrir etc), damos dois cliques em cima do componente para editar ele criamos os menus (arquivo dentro dele novo, abrir, salvar e sair)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

colocamos um panel da aba stardard tambem (caso voce for criar botao para agilizar recomendo criar dois panel), na propriedade do componente panel em align coloque alclient, na propriedade color coloque clwhite, e apague o texto da propridade caption (isso vai fazer ele ficar com a cor de fundo branca e quando a janela for expandida ele vai aumentar junto)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

agora colocamos um paintbox da aba system em cima do componente panel (la no object treeview vai ta dentro dele), tambem colocamos alclient na propriedade align dele

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

agora vamos fazer os procedimento quando apertar no menu, o primeiro vai ser o menu "novo", para acessar ele basta apertar nele pelo object treeview, depois ir em evento no object inspector, no onclick damos dois cliques para gerar a função

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

com a funçao gerada vamos construir o algoritimo para apagar tudo que tiver no canvas do paintbox, como ja aprendemos isso nao vou me aprofunda na teoria, como é para limpar tudo basta desenhar um retangulo do tamanho certo com a cor certa (no caso é desenhar um quadrado que começa no 0 e termina com o width e heigth do paintbox), usamos o atributo brush para mudar a cor e o metodo fillrect para desenhar o quadrado sem borda

Código:

procedure TForm1.Novo1Click(Sender: TObject);
begin
   PaintBox1.Canvas.Brush.Color := clwhite;
   PaintBox1.Canvas.fillRect(RECT(0,0,PaintBox1.Width,PaintBox1.Height));
end;

agora vamos carregar uma imagem com o menu "abrir", vamos fazer os mesmo procedimento anterior para criar a função, nesse declaramos e instanciamos um objeto TBitmap para carregar a imagem

Código:

procedure TForm1.Abrir1Click(Sender: TObject);
var img: TBitmap;
begin
   img := TBitmap.Create;
end;

para fazer um carregamento mais legal colocamos um componente OpenPictureDialog da aba dialogs

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

usamos uma estrutura if e nela passamos como argumento o metodo execute do componente OpenPictureDialog (isso abre uma caixa de dialogo para procurar a imagem e caso seja carregada executa o escopo ou seja caso seja carregada a gente vai pegar o nome dela e carregar pelo objeto TBitmap)

Código:

procedure TForm1.Abrir1Click(Sender: TObject);
var img: TBitmap;
begin
   img := TBitmap.Create;

   if OpenPictureDialog1.Execute then
   begin
       img.LoadFromFile(OpenPictureDialog1.FileName);
   end;
end;

depois de carregar basta desenhar ela no canvas do paintbox (eu coloquei para desenhar na posição 0,0 porem é possivel desenhar em uma posição selecionada pelo mouse)

Código:

procedure TForm1.Abrir1Click(Sender: TObject);
var img: TBitmap;
begin
   img := TBitmap.Create;

   if OpenPictureDialog1.Execute then
   begin
       img.LoadFromFile(OpenPictureDialog1.FileName);
       paintbox1.Canvas.Draw(0,0,img);
   end;
end;

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

o carregamento da imagem ta pronto agora vamos arrumar o menu para salvar, fazemos o mesmo esquema com o menu salvar, nele criamos tambem um objeto do tipo TBitmap

Código:

procedure TForm1.Salvar1Click(Sender: TObject);
var imgs: TBitmap;
begin
   imgs := TBitmap.Create;
end;

no objeto TBitmap definimos a largura e altura com o tamanho exato do paintbox

Código:

procedure TForm1.Salvar1Click(Sender: TObject);
var imgs: TBitmap;
begin
   imgs := TBitmap.Create;

   imgs.Width := PaintBox1.Width;
   imgs.Height := PaintBox1.Height;
end;

agora copiamos o conteudo do canvas do paintbox para o objeto TBitimap (caso tenha duvida sobre isso olhe nos tutoriais anteriores)

Código:

procedure TForm1.Salvar1Click(Sender: TObject);
var imgs: TBitmap;
begin
   imgs := TBitmap.Create;

   imgs.Width := PaintBox1.Width;
   imgs.Height := PaintBox1.Height;

   imgs.Canvas.CopyRect(Rect(0,0,paintbox1.Width,paintbox1.Height),PaintBox1.Canvas,Rect(0,0,paintbox1.Width,paintbox1.Height));
end;

para terminar salvamos porem para ficar com visual melhor adicionamos o componente SavePictureDialog da aba dialogs, usamos a estrutura if com o metodo Execute do componente SavePictureDialog como argumento

Código:

procedure TForm1.Salvar1Click(Sender: TObject);
var imgs: TBitmap;
begin
   imgs := TBitmap.Create;

   imgs.Width := PaintBox1.Width;
   imgs.Height := PaintBox1.Height;

   imgs.Canvas.CopyRect(Rect(0,0,paintbox1.Width,paintbox1.Height),PaintBox1.Canvas,Rect(0,0,paintbox1.Width,paintbox1.Height));

   if SavePictureDialog1.Execute then
   begin
   end;
end;

dentro da escopo do if usamos o metodo SaveToFile do objeto TBitmap e passamos como argumento para ele o atributo Filename do SavePictureDialog (recomendo concatenar com a extensao .bmp ou filtrar)

Código:

procedure TForm1.Salvar1Click(Sender: TObject);
var imgs: TBitmap;
begin
   imgs := TBitmap.Create;

   imgs.Width := PaintBox1.Width;
   imgs.Height := PaintBox1.Height;

   imgs.Canvas.CopyRect(Rect(0,0,paintbox1.Width,paintbox1.Height),PaintBox1.Canvas,Rect(0,0,paintbox1.Width,paintbox1.Height));

   if SavePictureDialog1.Execute then
   begin
      imgs.SaveToFile(SavePictureDialog1.FileName  + '.bmp');
   end;
end;

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

no ultimo menu que é o sair usamos a função close

Código:

procedure TForm1.Sair1Click(Sender: TObject);
begin
   close;
end;

agora vamos fazer um pincel igual no paint, para começar colocamos um componente time da aba system, na propriedade dele em interval colocamos 50

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

no componente paintbox existe os eventos onmousedown e onmouseup vamos usar ele (ou seja quando a gente segurar o botao do mouse ele vai desenhar e quando soltar ele vai parar), para começar criamos uma variavel global do tipo boolean

Código:

var
  Form1: TForm1;
  aperta: boolean;

implementation

no evento oncreate do form atribuimos para aquela variavel o valor falso isso isso serve para ele nao desenhar equanto a gente nao apertar o botao (pode ser que o valor ali seja verdadeiro quando abrimos o programa entao ia sair desenhado)

Código:

procedure TForm1.FormCreate(Sender: TObject);
begin
   aperta := false;
end;

agora no evento do onmousedown do paintbox a gente atribui true para aquela variavel ou seja vai ativar a permissão para começar a desenhar

Código:

procedure TForm1.PaintBox1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
   aperta := true;
end;

e no evento onmouseup do paintbox a gente atribui false para a variavel

Código:

procedure TForm1.PaintBox1MouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
   aperta := false;
end;

agora criamos mais duas variaveis globais do tipo integer que vai ser para armazenar a ultima posição

Código:

var
  Form1: TForm1;
  aperta: boolean;
  ux, uy : integer;

implementation

vamos usar mais um evento do paintbox que é o onmousemove e armazenar o x e y do evento nas variaveis (podemos usar isso tambem para mostrar a posição do mouse e armazenar em um label)

Código:

procedure TForm1.PaintBox1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
   ux := x;
   uy := y;
end;

no evento ontimer do timer a gente cria uma condição if e passamos como argumento a variavel do tipo boolean

Código:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
   if aperta then
   begin
   end;
end;

dentro da estrutura if podemos fazer um desenho com o canvas como por exemplo um quadrado pequeno entao quando aperta o mouse e segura conforme vamos passando o mouse vai fazendo o desenho

Código:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
   if aperta then
   begin
      PaintBox1.Canvas.Brush.Color:= clblack;
      PaintBox1.Canvas.FillRect(Rect(ux,uy,ux+10,uy+10));
   end;
end;

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

se a gente perceber o tempo de 50 milesimos do timer ainda da um pequeno delay entao recomendo baixar o tempo ou usar metodos como o ToLine que liga dois pontos com uma linha

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

veja carregando uma imagem modificando ela e depois salvamos ela

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

bom galera tem muitas melhorias que poderia ser feita como cor formato e tamanho do pincel ou outro tipo de ferramenta para edição, voces poderia programar uma ferramenta tao boa quanto o photoshop se nao melhor (porem deve ser um trabalho do cao pra fazer algo do genero kkkk), é isso esse tutorial chegou ao fim espero futuramente fazer outros tutoriais do genero ^^

by kõdo no kami