Desenhando formas, gráficos, texto e imagens (2D)

Artigos, manuais, conselhos e dicas sobre programação em AutoHotkey
User avatar
Gio
Posts: 455
Joined: 30 Sep 2013, 10:54
Location: Brazil

Desenhando formas, gráficos, texto e imagens (2D)

14 Aug 2018, 18:12

Olá :angel:

Você sabia que o AutoHotkey pode desenhar diversas formas, como gráficos de barras, círculos, com texto escrito, cores diferentes e etc? E que além disso, essas formas podem ser salvas em um arquivo para impressão ou exibidas em uma tela de um programa seu? E que elas também podem ser inseridas em arquivos de imagem já existente (editando o arquivo)?

As bibliotecas GDI e GDI+ são bibliotecas nativas do windows cujas funções podem ser acessadas através de DllCall(), mas graças a um usuário de nossa comunidade (chamado Tic), o acesso através dos scripts do AutoHotkey se tornou ainda mais fácil, de modo que podemos copiar a biblioteca inteira em código do AutoHotkey e então utilizar as suas funções com a sintaxe de função normal do AutoHotkey (sem precisar de DllCall).

Aprendendo a usar a biblioteca, você poderá criar relatórios customizados para os seus programas, tão profissionais quanto os que você encontra em qualquer programa de escritório. Além disso, poderá utilizar a tecnologia para criar a parte gráfica de jogos 2D e fazer mais um monte de coisas cuja lista só a criatividade pode completar.

Gostou? Então vamos aprender isso desde já! :thumbup:

OBS: Obrigado ao Tic (Tariq Porter) por sua biblioteca GDI+ (https://autohotkey.com/boards/viewtopic.php?f=6&t=6517). A biblioteca encontra-se disponível pelo autor para uso livre, tanto comercial quanto não-comercial.

1. O que é uma biblioteca do AutoHotkey?

O AutoHotkey possui um enorme conjunto de comandos e funções embutidas que possibilitam realizar um monte de coisa em matéria de automação e programação em ambiente Windows. Mas além disso, os usuários do programa também podem criar as suas próprias funções, transformando tarefas complexas que tomariam muitas linhas de código para programar em algo que podemos controlar com apenas uma chamada de função. Nesse sentido, muitos usuários da comunidade já têm contribuído regularmente ao longo dos anos para a expansão das possibilidades e da facilidade de uso da linguagem, disponibilizando verdadeiras bibliotecas de funções (conjuntos de funções que fazem várias coisas relacionadas, como tratamento de imagens no caso da GDIP_All de Tic) para que outros usuários possam copiar e colar em seus scripts, fazendo uso do código já desenvolvido.

Temos fórums específicos para o compartilhamento de funções e bibliotecas de funções, e muitas contribuições importantíssimas já foram agregadas em tópicos nestes fórums. Se você desejar conhecer o que já foi disponibilizado por outros membros da comunidade, ou se desejar incluir suas próprias contribuições, visite o fórum de Scripts e Funções, tanto em português quanto em inglês. Garanto que vai se surpreender com o que já foi criado por nossos membros contribuintes :D

:arrow: Para utilizar uma função ou biblioteca disponibilizada pelo usuário, basta copiar a código e colar embaixo no seu script. Assim, as funções poderão ser chamadas pelo nome. Não se esqueça também de ler o tópico e o código do autor, para ver as possibilidades dos parâmetros e as instruções de uso. Algumas bibliotecas são bem simples, outras precisam que você se dedique um pouco mais para aprender a usar (como a GDI), mas acredite: sempre vale muito a pena :thumbup:


2. Obtendo a biblioteca GDIP_All.ahk

Para obter a biblioteca GDIP_All.ahk, visite o tópico da biblioteca neste link e clique no link de GDIP_All.ahk. Depois, é só copiar o código da página que se abre (todo ele) e colar embaixo no seu script. Depois, você poderá seguir o restante deste tutorial para aprender como usar as funções e criar as imagens.

Conforme dito anteriormente, a biblioteca GDIP_All.ahk foi disponibilizada pelo autor para uso livre comercial e não comercial, e isso significa que você não precisará pagar nada nem pedir autorização para utilizá-la. Assim, como forma de agradecimento e para dar o merecido crédito ao autor, recomendo que você coloque esta mensagem (comentada, para que não interfira no código) no topo do seu script:

Thanks to tic (Tariq Porter) for his GDI+ Library
https://autohotkey.com/boards/viewtopic.php?f=6&t=6517


3. Entendendo a biblioteca GDI+

A biblioteca GDI+ é uma biblioteca com funções especiais para desenho de formas e texto em imagens. Ela foi feita para que esses desenhos sejam criados automaticamente na imagem a partir de comandos intuitivos, operados através de chamadas às suas funções. Isso significa que você não precisa se preocupar em criar loops para recolorir sequências de milhares pixels a partir de cálculos matemáticos de suas posições, mas apenas comandar certas funções que permitem que você indique "o desenhar de um círculo de raio Z na posição X,Y da imagem" (por exemplo). Dessa forma, desenhar se torna bem mais fácil para o programador.

Mas antes de usarmos essa função que desenha um círculo, é importante entender que precisaremos configurar algumas coisas. A GDI foi feita para que possamos nos basear no mundo real na hora de programar nossos desenhos. Isso existe para que o programador se familiarize mais facilmente com ela e também para que possa usá-la com maior facilidade no fim da contas, mas no início do aprendizado do seu uso, essa questão demanda um pouco mais do programador. Vamos explicar isso para que você entenda onde a GDI parece complicar no início, mas facilita bastante no fim. :thumbup:

:arrow: Conforme dito anteriormente, a GDI foi feita para transformar o ambiente de desenho programático em algo próximo do mundo real. Dessa forma, desenhar fica intuitivo e racional.

Assim, usando a ideia de analogia com o mundo real da GDI, temos que pensar as coisas dessa forma: se vamos desenhar um círculo, vamos desenhá-lo em algum lugar. Isso significa que precisaremos então configurar a criação de uma tela (de pintura) virtual para trabalharmos nela. Assim poderemos configurar várias telas (ou uma só) conforme desejarmos, e também poderemos fazer com que elas tenham tamanhos diferentes (por exemplo). Além disso, se vamos desenhar um círculo em uma tela, vamos desenhar este círculo com alguma coisa. Isso significa, por exemplo, que temos que chamar uma função que vai criar um pincel com tamanho 10 e cor azul, por exemplo (se essa for a cor que quisermos, é claro).

Está entendendo onde quero chegar? Criar um círculo envolve configurar a tela e o pincel, e depois comandar o desenho do círculo naquela tela com aquele pincel. Digo isso de modo simbólico a princípio, mas conforme vamos ver a seguir, a analogia é bem próxima.

:arrow: A princípio, ter de configurar estas coisas antes de começar a desenhar pode parecer desnecessário (afinal, poderiamos ter uma função de desenhar e pronto certo?) mas não se esqueça que as bibliotecas utilizam isso para facilitar a coisa para o programador (tornando o ambiente mais familiar com o mundo real) e também para não limitar as possibilidades do programador. Ter de configurar o pincel significa que também que você pode configurar 10 pincéis diferentes e usá-los da forma que quiser em várias telas diferentes se quiser, formando um desenho bem complexo sem muita dificuldade depois que os pincéis já estiverem à mão.

4. Criando o primeiro desenho (Tutorial 1)

Agora que você já entendeu com a GDIP funciona, vamos apresentar um pequeno código-tutorial, baseado naquele que foi escrito pelo prório Tic, que vai demonstrar o funcionamento da GDI para criar uma tela e escrever nela uma elipse (formato oval) e um retângulo, exibindo-os ao usuário em uma janela.

O código está comentado em português para facilitar o entendimento, então verifique nele como configuramos tudo e depois desenhamos as formas, exibindo em uma tela do AutoHotkey.

:!: :arrow: ATENÇÃO !! Para executar o código abaixo, não se esqueça que a biblioteca GDIP_All.ahk deve estar colada embaixo do código, pois é lá que estão os corpos das funções que vamos utilizar.

Code: [Select all] [Expand] [Download] GeSHi © Codebox Plus



Observando o código acima, perceba que dividimos ele em 6 passos. Como o tutorial 1 trata basicamente de desenhar uma elipse e um retangulo em uma janela e exibir essa janela, temos a seguinte disposição dos passos:

  • 1. Iniciar uma sessão do GDI.
  • 2. Criar e configurar a janela do Autohotkey (que vai receber o desenho).
  • 3. Criar e configurar as ferramentas de desenho da GDI (Tela de pintura, pincéis, adesivo de transferência, etc).
  • 4. Desenhar na tela de pintura
  • 5. Transferir o desenho da tela de pintura para a janela.
  • 6. Deletar os elementos que não vamos usar mais

Todos esses passos são individualmente importantes, mas entender a sequência deles também é. Não é possível desenhar na tela sem ter os pincéis e a própria tela. Também não será possível transferir o desenho para a janela sem ter a janela. Tudo é interligado. Mas é também lógico e intuitivo, desde que dediquemos algum tempo para pensar sobre o conjunto.

Assim, se quisermos adicionar uma outra elipse no código acima, como faríamos? Ora, a janela a ser criada é uma só, e o código ja existe. Podemos usar um pincel já existente ou então criar outro. E devemos de qualquer forma fazer o desenho na tela antes de transferir da tela para a janela. Logo, a posição das novas chamadas e o que temos que adicionar pode ser deduzida dessa forma.


5. Outros exemplos (Tutoriais 2 a 10 do tic)

A biblioteca GDI pode ser usada para muitas outras coisas além de exibir os desenhos criados em uma tela. Podemos salvá-los em arquivos, adicionar fontes, criar formas com apenas o contorno, bordas arredondadas, etc, etc. Com um pouco de criatividade, podemos criar desde gráficos em barras ou pizza até relatórios profissionais completos com linhas divisórias, texto padrão, com fontes específicas e muito mais.

Assim, vou colocar nesta seção a lista dos tutoriais originais que o Tic disponibilizou em seu tópico original. Se você quiser ver algum deles, basta executar e analisar o código a partir das premissas que descrevemos até aqui. Conforme puder, também vou traduzir os comentários destes tutoriais e colocá-los em forma de código neste próprio tópico. Esperamos que use esses exemplos apenas para se inspirar, pois as possibilidades da GDI são muito maiores :thumbup:

Exemplo 2: Gdip.Tutorial.2-Draw.Outlined.Shapes.ahk - Criar uma janela simples e desenhar nelas os contornos de uma elipse e um retângulo (somente os contornos)

Exemplo 3: Gdip.Tutorial.3-Create.Gui.From.Image.ahk - Criar uma janela a partir de um arquivo de imagem no seu computador

Exemplo 4: Gdip.Tutorial.4-Draw.Circles.ahk - Criar uma janela maximizada (fullscreen) e encher ela de elipses geradas randomicamente (um efeito visual bacana).

Exemplo 5: Gdip.Tutorial.5-Create.Bitmap.ahk - Colocar algumas formas em um bitmap e savar em um arquivo ".png".

Exemplo 6: Gdip.Tutorial.6-Image.Editing.ahk - Pegar arquivos de imagem do computador, carregar eles em um plano de fundo e depois salvar em um arquivo ".png".

Exemplo 7: Gdip.Tutorial.7-Draw.draggable.rounded.rectangle.ahk - Desenhar um retângulo com as bordas arredondadas e permitir que o usuário o arraste pela tela apenas clicando com o mouse e segurando.

Exemplo 8: Gdip.Tutorial.8-Write.text.onto.a.gui.ahk - Pegar o retangulo com bordas arredondadas e adicionar texto nele, mostrando várias opções de texto possíveis (fonte, tamanho, cor, etc).

Exemplo 9: Gdip.Tutorial.9-Create.a.progress.bar.on.standard.gui.ahk - Criar uma barra de progresso com um aspecto visual bacana usando a biblioteca em uma janela padrão do AutoHotkey.

Exemplo 10: Gdip.Tutorial.10-Rotate.Flip.or.Mirror.an.image.ahk - Rodar uma imagem, virar de lado ou espelhar ela em uma janela de camadas.

6. Considerações finais

Este foi mais um tutorial com o objetivo de demonstrar o mundo de possibilidades que o AutoHotkey traz. Sempre que nos deparamos com novas implementações, crescemos a nossa percepção sobre como as coisas que já vimos os programas fazerem em um computador podem ser feitas. Espero trazer mais alguns tutoriais para o nosso fórum em português, de modo a auxiliar nossos membros a crescerem seu interesse pelo AutoHotkey.

Se tiver alguma dúdiva sobre a GDI ou sobre como montar um relatório ou imagem, sinta-se livre para pergunta neste tópico ou no fórum Eu Preciso de Ajuda. Um forte abraço e até mais :wave:
"What is suitable automation? Whatever saves your day for the greater matters."
Barcoder - Create QR Codes and other Barcodes using only Autohotkey !!

Return to “Tutoriais”

Who is online

Users browsing this forum: No registered users and 1 guest