Relógio com a propriedade Canvas - Delphi

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Neste artigo, irei mostrar como fazer um relógio, utilizando a propriedade Canvas.

Crie um projeto em Delphi, com o nome que desejar, insira um "Timer" no projeto e mude a cor do formulario para "clBtnHighlight", Declare as seguintes variaveis globais :


    wHour, wMinuto, wSegundo : Word;
    xCentro, yCentro, Rad : integer;

No evento "Timer1Timer" do Timer, modifique ele para que fique da seguinte forma :


procedure TForm1.Timer1Timer(Sender: TObject);
var
  wSec : Word;
begin
  DecodeTime(Time, wHour, wMinuto, wSegundo, wSec);
  Refresh;
end;

Crie o procedimento abaixo :


procedure TForm1.DrawHand(xCentro, yCentro, Rad, BackRad: Integer;
  Angulo: Real);
begin
  Angulo := (Angulo +3 * Pi / 2);
  Canvas.MoveTo(xCentro - Round(BackRad * Cos(Angulo)),
                yCentro - Round(BackRad * Sin(Angulo)));
  Canvas.LineTo(xCentro - Round(Rad * Cos(Angulo)),
                yCentro - Round(Rad * Sin(Angulo)));
end;

No formulario, na propriedade "FormPaint", ajuste ela para que fique da seguinte maneira :


procedure TForm1.FormPaint(Sender: TObject);
var
  Angulo : real;
  i, x, y, size : integer;
begin
  xCentro := ClientWidth div 2;
  yCentro := ClientHeight div 2;
  if xCentro > yCentro then
    Rad := yCentro - 10
  else
    Rad := xCentro - 10;

  // Desenha o marcador de horas :)
  Canvas.Pen.Color := clYellow;
  Canvas.Brush.Color := clYellow;
  size := Rad div 50 +1;

  for I := 0 to 11 do
  begin
    Angulo := 2 * Pi * i / 12;
    x := xCentro - Round(Rad * cos (Angulo));
    y := yCentro - Round(Rad * sin (Angulo));
    Canvas.Ellipse(X - size, Y - size, X + size, Y + size);
  end;

  // Desenha o ponteiro de minutos...
  Canvas.Pen.Width := 2;
  Canvas.Pen.Color := clBlue;
  Angulo := 2 * Pi * wMinuto / 60;
  DrawHand(xCentro, yCentro, Rad * 90 div 100, 0, Angulo);

  // Desenha o ponteiro da Hora
  Angulo := 2 * Pi * (wHour + wMinuto / 60) / 12;
  drawHand(xCentro, yCentro, Rad * 70 div 100, 0, Angulo);

  // Desenha o ponteiro dos segundos
  Canvas.Pen.Width := 1;
  Canvas.Pen.Color := clRed;
  Angulo := 2 * Pi * wSegundo / 60;
  drawHand(xCentro, yCentro, Rad, Rad * 30 div 100, Angulo);

end;


Ainda no Formulario, na propriedade "FormCreate", insira o seguinte código :


 Timer1Timer(Self);

E na propriedade "FormResize" :

  Refresh;

O código do formulario ficará da seguinte maneira


unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls;

type
  TForm1 = class(TForm)
    Timer1: TTimer;
    procedure Timer1Timer(Sender: TObject);
    procedure FormPaint(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FormResize(Sender: TObject);
  private
    wHour, wMinuto, wSegundo : Word;
    xCentro, yCentro, Rad : integer;
  public
    procedure DrawHand( xCentro, yCentro, Rad, BackRad : Integer; Angulo : Real);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

{ TForm1 }

procedure TForm1.DrawHand(xCentro, yCentro, Rad, BackRad: Integer;
  Angulo: Real);
begin
  Angulo := (Angulo +3 * Pi / 2);
  Canvas.MoveTo(xCentro - Round(BackRad * Cos(Angulo)),
                yCentro - Round(BackRad * Sin(Angulo)));
  Canvas.LineTo(xCentro - Round(Rad * Cos(Angulo)),
                yCentro - Round(Rad * Sin(Angulo)));
end;

procedure TForm1.Timer1Timer(Sender: TObject);
var
  wSec : Word;
begin
  DecodeTime(Time, wHour, wMinuto, wSegundo, wSec);
  Refresh;
end;

procedure TForm1.FormPaint(Sender: TObject);
var
  Angulo : real;
  i, x, y, size : integer;
begin
  xCentro := ClientWidth div 2;
  yCentro := ClientHeight div 2;
  if xCentro > yCentro then
    Rad := yCentro - 10
  else
    Rad := xCentro - 10;

  // Desenha o marcador de horas :)
  Canvas.Pen.Color := clYellow;
  Canvas.Brush.Color := clYellow;
  size := Rad div 50 +1;

  for I := 0 to 11 do
  begin
    Angulo := 2 * Pi * i / 12;
    x := xCentro - Round(Rad * cos (Angulo));
    y := yCentro - Round(Rad * sin (Angulo));
    Canvas.Ellipse(X - size, Y - size, X + size, Y + size);
  end;

  // Desenha o ponteiro de minutos...
  Canvas.Pen.Width := 2;
  Canvas.Pen.Color := clBlue;
  Angulo := 2 * Pi * wMinuto / 60;
  DrawHand(xCentro, yCentro, Rad * 90 div 100, 0, Angulo);

  // Desenha o ponteiro da Hora
  Angulo := 2 * Pi * (wHour + wMinuto / 60) / 12;
  drawHand(xCentro, yCentro, Rad * 70 div 100, 0, Angulo);

  // Desenha o ponteiro dos segundos
  Canvas.Pen.Width := 1;
  Canvas.Pen.Color := clRed;
  Angulo := 2 * Pi * wSegundo / 60;
  drawHand(xCentro, yCentro, Rad, Rad * 30 div 100, Angulo);
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Timer1Timer(Self);
end;

procedure TForm1.FormResize(Sender: TObject);
begin
  Refresh;
end;

end.


Feito isso o relógio está pronto

Layout do Relógio

Figura 1. Layout do Relógio

Concluindo assim nosso artigo, Até a proxima,

Abraço.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?