Desenhos complexos com CustomPaint
Tags: custom, paint, complex, draw
Published: 2024-05-18 14:04:20

No ultimo artigo vimos os conceitos básicos do CustomPaint e como ele pode nos habilitar a desenhar qualquer forma geométrica no Flutter, agora vamos juntar essas formas geométricas para que possamos fazer desenhos mais complexos.

Por exemplo, se juntarmos arco com linhas podemos desenhar um relógio

![](https://cdn-images-1.medium.com/max/800/1*7iIRu7lkzsGqhE8fFJ_65w.png)

Primeiramente vamos desenhar o arco do relógio

![](https://cdn-images-1.medium.com/max/800/1*4NC6Mu6X-9gD7tKFTrIieQ.png)
{% gist https://gist.github.com/toshiossada/57572fdb3b7a568b8ca7e9a00beb763e file=arco_relogio %}

O arco vai de 0 à 2pi para formar uma circunferência completa

![](https://cdn-images-1.medium.com/max/800/1*jLpVFNFk60X_Ou-ph8dfbA.png)

Agora precisamos gerar 12 linhas que irá representar as 12 horas do nosso relógio e precisamos posiciona-los no ângulo exato de cada hora, para isso pegamos o valor de 2pi e dividimos por 12 e depois multiplicamos pela hora.

![](https://cdn-images-1.medium.com/max/800/1*w6pGjArdkmmd_1Zwn0Fe3A.png)
{% gist https://gist.github.com/toshiossada/60889cc74056eb82a5fb9ed998b1b172 file=Untitled-1 %}

Agora iremos desenhar os ponteiros do nosso relógio, para isso precisamos saber como converter horas e minutos em ângulos para isso utilizarei o [https://gemini.google.com/](https://gemini.google.com/) para me ajudar a desenvolver meu método.

![](https://cdn-images-1.medium.com/max/800/1*um5f4zY8SBV40hISfXHOxg.png)

E cheguei nessa função
{% gist https://gist.github.com/toshiossada/aad42cae4e62dc592c2fa6ceae26d665 file=Untitled-1 %}

Com a função de converssao de horas em angulo basta desenharmos duas linhas passando o sem e cos do ângulo
{% gist https://gist.github.com/toshiossada/e46d944cfcf6e7b66ce6019f97da82e4 file=Untitled-1 %}


![](https://cdn-images-1.medium.com/max/800/1*ge1VoS_3CAVJQ0fmWLszsQ.png)

![](https://cdn-images-1.medium.com/max/800/1*6VUTqYPd6gr7RvD3K75Lhg.png)

E para finalizar vamos colocar um circulo no centro para representar a junção dos ponteiros
{% gist https://gist.github.com/toshiossada/205ecbaccf95a0c360adad2e1114f2ee file=Untitled-1 %}


![](https://cdn-images-1.medium.com/max/800/1*681XLjMQxXS0jZOu3P--vQ.png)

E o resultado será este:

![](https://cdn-images-1.medium.com/max/800/1*yEK00pigaeh9rziDJNI94g.png)

E de bônus vamos aprender a fazer aquelas mascara na câmara quando queremos enquadrada algo (como o rosto)

![](https://cdn-images-1.medium.com/max/800/1*iSZi6BOdTzrVOQxFVAkubQ.png)

Primeiramente vamos instalar algum package de câmera, estou utilizando o câmera

![](https://cdn-images-1.medium.com/max/800/1*AuHKVd12o-dsP7VY3AfeuA.png)

E vamos inicializa-la em nosso widget

![](https://cdn-images-1.medium.com/max/800/1*4upPoZKpNYIdsJbe31cE4Q.png)

A construção do nosso widget será a seguinte, uma Stack onde o primeiro item de nossa Stack será a câmera e o segundo item será nosso custom paint que ficará acima da câmera.

E com isso iremos criar um Retangulo que irá cobrir nossa camera.

![](https://cdn-images-1.medium.com/max/800/1*_ylpn14bNGfj35bM8E4iLw.png)

![](https://cdn-images-1.medium.com/max/800/1*GE4nRGx7AJCNvT0Jg6dYug.png)

Agora vamos desenhar um circulo oval que será o local que iremos centralizar o rosto na câmera

![](https://cdn-images-1.medium.com/max/800/1*aShV-eCTtNqGXiafw9QMfw.png)

O resultado será um circulo preto no meio da tela

Com o path é possível fazer algumas operações como retirar a diferença entre dois paths, com isso podemos fazer um recorte em nosso CustomPaint criando um buraco na tela.

![](https://cdn-images-1.medium.com/max/800/1*gd9PzXLl0EnSSrTIr4xy4Q.png)

Com o path é possível fazer algumas operações como retirar a diferença entre dois paths, com isso podemos fazer um recorte em nosso CustomPaint criando um buraco na tela.

![](https://cdn-images-1.medium.com/max/800/1*8mtHTFRqOgAfM-42EoUfEA.png)

E voilá temos, temos nossa mascara para o rosto.

![](https://cdn-images-1.medium.com/max/800/1*kYeu-kwpVCeiY-ipJnBJ_Q.gif)

Você pode acessar esses dois exemplo em meu github

https://github.com/toshiossada/clippath

Legal né? Lembrando que poderíamos ter usado este recurso com um Socket, como o Firebase para que a ativação e desativação seja de forma instantânea, caso seu negócio necessite

Confira o exemplo completo em  
[https://github.com/toshiossada/togglefeature](https://github.com/toshiossada/togglefeature)

![](https://cdn-images-1.medium.com/max/800/0*FPHz4rb0uv3Fq5OQ.png)

Entre em nosso discord para interagir com a comunidade: [https://discord.com/invite/flutterbrasil](https://discord.com/invite/flutterbrasil)  
[https://linktr.ee/flutterbrasil](https://linktr.ee/flutterbrasil)