Usando o aplicativo

Toolbar

A toolbar permite a criação e manipulação de elementos e configurações da aplicação.

Os controles seguem esta ordem, da esquerda para direita:

Área esquerda

• Adicionar Retângulo
• Adicionar Circulo
• Adicionar Texto
• Cor de preenchimento padrão (Balde de Tinta), que define a cor de preenchimento inicial de todos novos elementos adicionados
• Cor de borda padrão (Lápis), que define a cor inicial da borda inicial dos novos elementos adicionados

Ao selecionar um elemento, novos controles surgem para modifica-lo:

• Apagar elemento (Lata de Lixo)
• Cor de preenchimento (Balde de Tinta)
• Cor de borda (Lápis)

Além disso, dependendo da disposição e do número de elementos na tela, podem aparecer os seguntes botões de manipulação da ordem na pilha (*Z-Index):

• Enviar para trás (Flexa dupla para baixo)
• Mover para baixo (Flexa dupla para baixo)
• Trazer para frente (Flexa dupla para cima)
• Mover para cima (Flexa dupla para cima)

Área direita

Nesta ordem, da esquerda para direita:

• Link para documentação (este site)
• Botão para abrir o Live Editor
• Botão para exportar o conteúdo em JSON
• Botão para exportar o conteúdo como imagem
• Seletor do Renderer entre o Canvas e o Fabric.js

Canvas

A área principal permite a visualização e manipulação dos elementos. Ao selecionar um elemento é possível movê-lo e redimensioná-lo.

No Canvas os controles são rosas com um único controle. No Fabric.js os controles são verdes, e permitem um controle melhor para deformar o elemento.

Live Editor

O editor funciona nas duas vias: reflete em tempo real as edições feitas no canva e também altera o canvas para refletir o que foi alterado via código.

O editor inclusive permite fazer alteraçÕes que não são possíveis ainda via interface, como por exemplo alterar o texto de um elemento