/2d-canvas-js

Repositório usado no trabalho de Computação Gráfica - CC UEM 2019

Primary LanguageJavaScript

2d-canvas-js

Repositório usado no trabalho de Computação Gráfica - CC UEM 2019

Desenvolvimento

  • Sandro Henrique Uliana Catabriga (RA 98397)
  • Vinícius da Costa Regatieri (RA 104016)

Ajuda ao usuário

Abrir o programa

  • Para abrir o programa, basta abrir o arquivo "index.html" em seu navegador de preferência.
  • Ao fazer isso, você já verá a interface principal do programa.
  • Não é necessário instalar nenhum programa.

Comandos

  • Na interface principal, é possível ver o canvas de desenho, os botões de ferramentas e uma tabela de objetos presentes na tela.

    • Cada botão presente no programa conta com um atalho de teclado, citado entre parênteses. (Letras em maiúsculo representam shift + letra);
    • O botão ESC (Escape) cancela a operação de qualquer uma das operações de desenho.

  • Os comandos também estão disponíveis via linha de comando. Ela é acessível pelo próprio console do navegador

    • Abrir console no Google Chrome: Ctrl + Shift + j

    • Abrir console no Firefox: Ctrl + Shift + k

    • Uma lista das interfaces dos comandos será disponibilizada mais a frente.

Seleção de objetos

  • Para selecionar/deselecionar um ou vários objetos presentes no canvas, clique em uma linha da Tabela de Objetos.
  • Quando selecionado, o objeto e sua linha da tabela ficarão vermelhos, representando que estão selecionados.

Eixos

  • A posição do mouse em relação aos eixos X e Y estão localizados no programa, abaixo do canvas.
  • O ponto (0, 0) é o ponto do canto superior direito.
    • Sentido positivo de X: para direita;
    • Sentido positivo de y: para baixo.

Interfaces de comandos

Comando Parâmetros Descrição
clearScreen() - Limpa a tela, destruindo todos os objetos
undo() - Desfaz a última ação feita pelo usuário
redo() - Refaz a última ação desfeita pelo usuário
desenhar_triangulo(x1, y1, x2, y2, x3, y3) x1: X do primeiro ponto
y1: Y do primeiro ponto
x2: X do segundo ponto
y2: Y do segundo ponto
x3: X do terceiro ponto
y3: Y do terceiro ponto		 Desenha um triângulo com os três pontos disponibilizados
desenhar_circulo(x1, y1, x2, y2) x1: X do primeiro ponto
y1: Y do primeiro ponto
x2: X do segundo ponto
y2: Y do segundo ponto		 Desenha um círculo com os dois pontos disponibilizados
(centro do círculo, borda do círculo)
desenhar_reta(x1, y1, x2, y2) x1: X do primeiro ponto
y1: Y do primeiro ponto
x2: X do segundo ponto
y2: Y do segundo ponto		 Desenha uma reta com os dois pontos disponibilizados
desenhar_retangulo(x1, y1, x2, y2) x1: X do primeiro ponto
y1: Y do primeiro ponto
x2: X do segundo ponto
y2: Y do segundo ponto		 Desenha um retângulo com os dois pontos disponibilizados
(os pontos têm que ser a diagonal do retângulo)
transladar(x, y) x: X do destino da translação
y: Y do destino da translação		 Translada os objetos previamente selecionados para o ponto (x, y)
escala(sx, sy) sx: Escala em X
sy: Escala em Y		 Faz uma operação de mudança de escala (sx, sy) nos objetos selecionados
rotacao(theta, x, y) theta: Ângulo (em graus) da rotação
x: X do ponto de referência da rotação
y: Y do ponto de referência da rotação		 Faz uma operação de rotação com theta graus, em torno do ponto (x, y)

TODO

  • Desenhos
    • Reta
    • Triângulo
    • Quadrado
    • Circulo
    • Locar Eixos
    • P. Criação
  • Seleção de Objetos
    • Múltiplos Objetos
    • Único Objeto
  • Operações
    • Clear
    • Translação
    • Escala
    • Rotação
    • Zoom
      • Janela
      • Aspect Ratio
    • Zoom Extent
      • Centralizar
      • Aspect Ratio
  • IHC
    • Feedback
    • Cursor
    • C. Cursor
    • Dest. Sel
    • Ajuda
    • Undo
    • Redo
    • Linha de Comando
      • Translação
      • Escala
      • Rotação
      • Zoom
      • Zoom Extent
      • Clear
      • Undo
      • Redo
      • Reta
      • Triângulo
      • Quadrado
      • Circulo