Criando um relógio no estilo iOS usando o canvas

Parte 2: Desenhando os elementos do relógio

Como todo projeto organizado, precisamos definir os objetivos, levantar o que será necessário, preparar as ferramentas. Com nosso relógio não será diferente. Primeiro, vamos começar desenhando e definindo os primeiros elementos de nosso relógio como o círculo que irá compor o background, os números e os ponteiros de horas, minutos e segundos.

O código fonte mostrado neste post e nas próximas 2 partes são trechos do projeto completo, que será disponibilizado para download ao publicarmos a 4ª parte. Então alguns trechos poderão não fazer sentido inicialmente, mas basta acompanhar e aos poucos o relógio ganhará movimento e será finalizado.

Alguns métodos e propriedades nativas do canvas que serão utilizados, estão abaixo classificados quanto a sua função :

Definir cores, estilos para cores e sombras para elementos

Definir estilo para linha simples

Criar Retângulos e limpar pixel em um determinado retângulo

Definir caminhos para criação de formas e elementos

Transformações em elementos, para tamanhos e posições

Escrever textos, definir fontes e estilos de cores

Composição de opacidade ou transparência em elementos

Métodos para definição de contextos e armazenamento de informações

Desenhando o círculo drawBackgroundClock()

Algumas das variáveis utilizadas no escopo desta função são:

Para desenhar nosso relógio, iremos montar 4 círculos sendo eles dois completos e dois meia lua, para formar efeitos de gradiente e deixar com um realismo mais próximo do iOS versão 6.

Nas linhas 91, 92 e 93 acima, eu defino três variáveis para uso interno da função, que desenhará o círculo. Sendo uma delas a "ang" para guardar o valor de um ângulo de 180 graus que será usado em duas circunferências do background. E outro valor guardado, será a variável "bg", um objeto já definido no início do projeto que contém as cores desse background, onde há a possibilidade de alteração dessas cores através de valores já definidos. Se você não conhece objetos em javascript, confira no link Objeto e funções construtoras mais informações sobre o assunto.

Para efeito de reusabilidade, definimos uma função genérica para criação de um círculo. Através dela, definiremos cor, borda, início do ângulo, fim do ângulo da circunferência, posição x do círculo, posição y do círculo, se vai possuir escala em x ou em y, e também se irá possuir efeito radial em sua cor. Definidas desta forma a função circle() assume os seguintes valores:

Nas linhas 95 a 123, está escrita a função que desenha um círculo no canvas contendo todas as informações descritas no parágrafo anterior. A importância de possuir uma função genérica para criar um círculo é justamente evitar repetição de código milhares de vezes para a mesma finalidade, desta forma o código fica limpo e mais prático. Claro, que esta função não está perfeita, mais detalhes poderiam ser informados via parâmetro, mas este não é nosso objetivo, então para exercício de casa fica a dica para tornar aberta a escolha de tal tipo de radial, tamanho da borda e entre outras informações.

As quatro últimas linhas 125, 126, 127 e 128 são nossos círculos desenhados que compõem o background do relógio.

A primeira linha 125, é a borda do nosso relógio definida na cor cinza(#CCC) por padrão dentro da função, funcionando assim, se o a cor for informada, a circunferência assumirá a cor desejada, caso omitido a cor, cria a borda por padrão.

A segunda linha 126, é o cinza mais claro (#F3F2F2), que preencherá nosso relógio todo ficando desta forma:

Se tudo ocorreu certinho, retornando para as linhas de códigos, 127 e 128 finalizam nosso background, desenhando duas circunferências em forma de meia lua, de forma, que uma terá uma meia lua um pouco maior que a outra para formar um efeito de radial personalizado, uma espécie de curva no nosso relógio. Veja o resultado.

Depois de executado, este será nosso background para o relógio durante o dia. Agora vamos para os números.

Desenhando e posicionando os números drawHours()

Algumas das variáveis utilizadas no escopo desta função são :

Para desenhar os números e posicioná-los corretamente em nosso relógio, vamos lembrar um pouco da Trigonometria estudada no ensino médio. A figura abaixo mostra um círculo com as posições em graus, para os locais dos números do relógio (lembre que o círculo possui 360 graus, divididos em 12, nos dão intervalos de 30 graus):

Nosso problema é encontrar a posição do canvas onde os números do relógio devem ser colocados. Vamos ver, por exemplo, o número 2. No desenho abaixo, vemos que o número 2 está a 30º de distância do número 3 (que fica exatamente sobre o eixo X):

O local onde o número 2 está é exatamente uma posição x,y sobre o círculo. Por definição, o tamanho x é o cosseno do ângulo formado entre o eixo horizontal e a seta que indica o número 2, ou seja, cos(30º). A altura do número 2 é o valor y que, por definição, é o seno do ângulo indicado, ou seja, sen(30º). Veja isso na imagem abaixo:

Assim, temos que é fácil encontrar as posições x,y de qualquer um dos números do relógio, sabendo o ângulo de distância entre ele e o número 3 (posição 0º, segundo os padrões adotados).

Temos então que, para qualquer número do relógio, os valores de x e y serão, respectivamente, o coseno e o seno do ângulo alfa formado em relação ao eixo horizontal, conforme mostrado na figura:

x,y = cos(?),sen(?)

Seguindo, esta ideia, a posição do número 1, a 60º do eixo x, será

x = cos(60º) e y = sen(60º)

Implementando o cálculo trigonométrico em JavaScript

O cálculo trigonométrico em JavaScript trabalha com ângulos na forma de radianos. Precisamos então transformar os graus em radianos. Isso é feito sabendo que a circunferência mede 2 ? r, onde r é o raio do círculo e ? é a constante (aprox.) 3,14.

Com o ângulo em radianos, encontramos a posição dos ponteiros, aplicando na fórmula :

x = DISTÂNCIA x RAIO x COS(ÂNGULO)

y = DISTÂNCIA x RAIO x SEN(ÂNGULO)

Onde, x e y correspondem respectivamente a distância exata em pixel em relação ao centro do círculo.

DISTÂNCIA = distância de uma ponta a outra do círculo

RAIO = distância em relação centro do círculo

ÂNGULO = ângulo que será calculado em radianos

Aplicando esta fórmula, todos os 12 números serão desenhados corretamente em nosso relógio. Para melhorar a apresentação aplicamos uma fonte já definida no início do nosso projeto (Trebuchet MS), guardada na variável font. O tamanho da fonte foi definido em 10% da largura da tela, guardada na variável percentScreen. Desta forma, qualquer tamanho do relógio terá números proporcionalmente adaptados.

Enfim, nosso relógio ganha uma cara nova ficando desta maneira :

Desenhando os ponteiros de horas, minutos e segundos drawHoursLine(), drawMinutesLine() e drawSecondLine()

Umas das fases mais simples do projeto é desenhar os ponteiros, pois o canvas permite desenhar livremente circunferências, linhas, retângulos e entre outros elementos já definidos. Utilizaremos o recurso de criar uma forma própria, neste caso, um triângulo. E para isso, definimos uma função genérica para criar os triângulos que serão nossos ponteiros da hora e do minuto. O ponteiro dos segundos terá uma largura mais fina do que os outros, ficando em forma de uma reta.

Veja o código:

A função para desenhar nossos triângulos é drawPonteiro() nas linhas 167 a 187 do projeto correspondem ao escopo da função, ela recebe algumas informações como o "pointer" ou ponteiro no instante, assim como, quantos ângulos este ponteiro irá se deslocar, a diferença entre o instante do ângulo e o total, o total, altura do triângulo, largura do triângulo, cores 1 e 2 para fazer gradiente, posicionar tantos x em relação ao centro e informar o tipo de gradiente. Assim Definida ela assumirá os seguintes valores:

Assumindo estes valores, podemos criar nossos ponteiros, é só conferir no projeto que existe três funções para desenhar o ponteiro da hora, minuto e segundo, respectivamente nomeados por, drawHoursLine(), drawMinutesLine(), drawSecondsLine(). Que irão utilizar a função drawPonteiro(), estas funções estão dividas justamente em cada módulo para um ponteiro diferente, justamente para alterar as configurações de algum ponteiro isoladamente.

As funções drawHoursLine() e drawMinutesLine() desenham um triângulo na tela a partir do centro sendo que o ponteiro da hora tem uma altura menor que do minuto. Todas informadas através de porcentagem em relação a tela, para que os ponteiros se adaptem ao tamanho que for selecionado para o relógio.

1. drawHoursLine() e drawMinutesLine()

A função do ponteiro das horas, precisa respectivamente do atributo hours do objeto clock, que será sempre atualizado gerando diferentes ângulos para nosso ponteiro. E em seguida, passamos a diferença entre o total de números(três), e o total de números(doze), para cálculo dos ângulos. Com estas informações nosso ponteiro de horas recebe todos os dados necessários para calcular os ângulos do ponteiro.

Desenhar os ponteiros agora e fácil só precisa informar o resto das propriedades de altura, largura, cor e distância horizontal. Para nosso relógio ganhar uma cara nova. Mas para matar dois leões de uma vez só, implementar o ponteiro do minuto, seguirá o mesmo procedimento do ponteiro da hora, com a diferença que o total de números agora será de sessenta e a diferença de quinze, sem falar, que este ponteiro terá uma altura um pouco maior que o ponteiro das horas. Com isso, nosso relógio fica desta maneira:

2. drawSecondsLine()

Feito os ponteiros das horas e minutos, agora adicione a função para o ponteiro do segundo as mesmas configurações do ponteiro dos minutos, com a diferença que agora a largura é 0.75 justamente para não ficar com aparência de um triângulo. A cor que foi definida para este ponteiro foi uma vermelha(#DB3E3E), onde mais tarde a mesma será alterada quando anoitecer.

Adicionada esta última função, veja como nosso relógio ficou :

Perceba que nosso relógio já esta quase pronto, no código completo você poderá conferir alguns recursos a mais implementados no relógio como marcadores central e entre outros recursos, afim de melhorar a visualização dos ponteiros e fazer um efeito de arredondamento para transmitir um pouco de realismo. Estes marcadores, utilizam a mesma ideia que aplicamos no background do relógio. Pois, eles são dois círculos desenhados em cima dos ponteiros.

No próximo post, onde iremos implementar os movimentos dos ponteiros.

PARTE 1: INTRODUÇÃO AO CANVAS

PARTE 2: DESENHANDO OS ELEMENTOS DO RELÓGIO

PARTE 3: ADICIONANDO MOVIMENTO AOS PONTEIROS

PARTE 4: FINALIZANDO O PROJETO

Para ser informado sobre a publicação da continuação, siga-nos no Twitter