Descrição
O aplicativo descrito é um sistema de esboços (sketching) em uma página HTML interativa. Ele permite que o usuário crie e manipule diferentes formas e textos em um canvas virtual.
Ao abrir o aplicativo no navegador, você verá uma área de desenho representada pelo elemento <div> com o id “canvas”. Há uma barra de ferramentas com botões para criar diferentes elementos, como retângulos, círculos, retângulos com cantos arredondados e texto. Esses botões são implementados como elementos <button> e possuem ícones correspondentes para cada tipo de elemento.
Ao clicar em um desses botões, um novo elemento será criado no canvas. Por exemplo, ao clicar no botão “Retângulo”, você poderá arrastar e soltar o mouse na área de desenho para criar um retângulo. O mesmo se aplica aos outros tipos de elementos.
Os elementos criados são representados por <div>s com classes específicas, como “shape” para retângulos e retângulos arredondados, “shape circle” para círculos e “text” para textos. Esses elementos são posicionados absolutamente no canvas e podem ser redimensionados ou movidos pelo usuário.
Ao clicar em um elemento existente no canvas, ele será selecionado, exibindo uma borda vermelha ao redor dele. Você também pode selecionar vários elementos mantendo pressionada a tecla Shift enquanto clica em cada um deles. Uma vez selecionados, você pode remover os elementos selecionados clicando no botão “Remover Selecionados” ou removê-los individualmente clicando no botão “Remover” enquanto um elemento estiver selecionado.
Além disso, há uma funcionalidade de edição de texto, que pode ser acessada clicando no botão “Texto”. Isso abrirá uma janela modal onde você pode inserir um novo texto, definir o tamanho da fonte e adicionar uma borda ao texto. Após inserir as informações, você pode clicar no botão “Adicionar” para criar um novo elemento de texto no canvas.
O aplicativo também possui uma funcionalidade de exportação, onde você pode baixar uma captura de tela do canvas como uma imagem PNG. Basta clicar no botão “Baixar” para iniciar o processo de exportação.
Em resumo, o aplicativo é uma ferramenta simples de desenho e criação de esboços, permitindo ao usuário criar, editar, redimensionar e mover diferentes elementos no canvas virtual. É uma interface interativa e fácil de usar para criar esboços ou diagramas simples diretamente no navegador.
Codigo fonte da ferramenta:
Para contribuir com o desenvolvimento dessa ferramenta acesse o código fonte, melhore ele e poste o novo código como um comentário de url como esse: https://jsfiddle.net/moisesrlima/1pz5k2L3/
