Projeto Conceitual de Um Editor Gráfico 2D

Esta página foi organizada por: Vanio Fragoso de Melo

[Vanio F. de Melo, José A. L. Minchola e Mercedes G. Marques] [Harlen C. Batagelo] [Jorge Kawamura e Paulo G. Seifer] [Luiz F. S. Wetzel]

Objetivo

Nesta página trataremos do projeto conceitual, mais especificamente, da coleta de requerimentos de um Editor Gráfico 2D simples. As especificações de requerimentos deve preocupar-se com a compreensão das necessidades. É um processo analítico em que representações do sistema são produzidas que não somente descreve o que é requerido mas também auxilia na análise de situações. Os requerimentos de um sistema pode ser considerado em três categorias. O requerimento funcional que especifica o que o sistema deve fazer. O requerimento de dados que especifica a estrutura do sistema e os dados que devem está disponíveis para que o processamento seja bem sucedido. O requerimento de usabilidade que especifica o nível de performance e satisfação com o sistema.

O nosso Editor Gráfico 2D tem as seguintes funcionalidades: criar, deletar, mover, redimensionar, rotacionar e mudar o estilo de desenho (dash, dotted, solid) que agem nas primitivas gráficas linha, retângulo, triângulo e circunferência.
 
 

Projeto Conceitual: Especificações de Requerimento

Grupo 1: Vanio Fragoso de Melo

  José Antonio Lujan Minchola

  Mercedes Rocio Gonzales Marquez

• Nas especificações dos requerimentos usamos ferramentas como: diagrama de fluxo de dados, dicionário de dados e diagrama de relação de entidades.

• As ações do sistema são:

4) Redimensionar objetos criados;

5) Rotacionar objetos criados;

5) Mudar o estilo.

As restrições do sistema são:

1) Estabelecer um estilo por DEFAULT;

2) Os estilos considerados são: dash, dotted, solid;

3) Estabelecer a cor de desenho e a cor de fundo.

1. Requerimentos Funcionais

• Diagrama de contexto (Figura 1)
• Diagrama de fluxo de dados nivel 1 (Figura 2)
• Diagrama de fluxo de dados nivel 2 (Figura 3)

2. Requerimentos de Dados

2.1-Dicionário de Dados

opção= opção#

opção_linha= opção+ opção# válida (encaminhar_opção =Y)

opção_triângulo= opção+ opção# válida (encaminhar_opção =Y)

opção_retângulo= opção+ opção# válida (encaminhar_opção =Y)

opção_circunferência= opção+ opção# válida (encaminhar_opção =Y)

subopção1= subopção_linha + subopção_linha# válida (encaminhar

subopção_linha = Y)

subopção2=subopção_triângulo +subopção_triângulo# válida ( encaminhar

subopção_triángulo = Y)

subopção3=subopção_retângulo + subopção_retângulo# válida ( encaminhar

subopção_retângulo = Y)

subopção4 =subopção_circunferência + subopção_circunferência# válida ( encaminhar

subopção_circunferência = Y)

subopção_linha1= subopção1 + subopção1# válida ( encaminhar

subopção_linha1 = Y)

subopção_triângulo1= subopção2 + subopção2# válida ( encaminhar

subopção_triângulo1 = Y)

subopção_retângulo1= subopção3 + subopção3# válida ( encaminhar

subopção_retângulo1 = Y)

subopção_circunferência1= subopção4 + subopção4# válida ( encaminhar

subopção_circunferência1 = Y) (Ver nota )

dados criação_linha= ponto1_linha + ponto2_linha

dados eliminação_linha= objeto selecionado

dados mover1_linha = novo ponto + objeto selecionado

dados mover2_linha = novo ponto1 + novo ponto2 + objeto selecionado

dados estilo_linha = objeto selecionado + estilo

dados criação_triângulo= ponto1_triângulo + ponto2_triângulo + ponto3_triângulo

dados eliminação_triângulo= objeto selecionado

dados mover1_triângulo = novo ponto + objeto selecionado

dados estilo_triângulo = objeto selecionado + estilo

dados criação_retângulo= ponto1_retângulo + ponto2_retângulo

dados eliminação_retângulo= objeto selecionado

dados mover1_retângulo = novo ponto + objeto selecionado

dados estilo_retângulo = objeto selecionado + estilo

dados criação_circunferência= centro + raio

dados eliminação_circunferência= objeto selecionado

dados mover1_circunferência = novo ponto + objeto selecionado

dados estilo_circunferência = objeto selecionado + estilo

Nota.- Os fluxos de dados subopção_linha?, subopção_retângulo?, subopção_triângulo?, suopção_circunferência? não consideradas, seguem de forma análoga.

b) Elementos de dados

opção# = identificador da opção.

opção_encaminhada = Y opção# válida, N não válida.

subopção_linha# = identificador das subopções de linha.

subopção_triângulo# = identificador das subopções de triângulo.

subopção_retângulo# = identificador das subopções de retângulo.

subopção_circunferência# = identificador das subopções de circunferência.

subopção_linha_encaminhada = Y subopção_linha# válido, N não válido.

subopção_triângulo_encaminhada = Y subopção_triângulo# válido, N não válido.

subopção_retângulo_encaminhada = Y subopção_retângulo# válido, N não válido.

subopção_circunferência_encaminhada = Y subopção_circunferência# válido, N não

válido.

ponto1_linha = ponto inicial da linha.

ponto2_linha = ponto final da linha.

ponto1_triângulo = primeiro ponto do triângulo.

ponto2_triângulo = segundo ponto do triângulo.

ponto3_triângulo = terceiro ponto do triângulo.

ponto1_retângulo = vértice inferior esquerdo do retângulo.

ponto2_retângulo = vértice superior direito do retângulo.

centro = centro da circunferência.

raio = raio da circunferência.

objeto selecionado = pixels do objeto.

novo ponto = nova posição de referência para cálculo dos acréscimos.

novo ponto1 = nova posição do ponto1.

novo ponto2 = nova posição do ponto2.

estilo = estilo dash ou dotted ou solid.

c) Processos

c.1-Processos para a opção linha

consiste de:

(1.1) Fixar cor diferente do fundo;

(1.2) Desenhar a linha usando o algoritmo de construção.

(2) Algoritmo de desenho para deletar -Iniciar com evento eliminação_linha

consiste de:

(2.1) Fixar cor do fundo;

(2.2) Desenhar a linha usando o algoritmo de construção.

(3) Transladar objeto -Inicia com evento dados mover1_linha

consiste de:

(3.1) Cálculo do acréscimo em função do novo ponto para cada pixel do objeto. Somar acréscimo.

(4) Adicionar e/ou apagar linhas -Iniciar com evento dados_move2_linha

consiste de:

(4.1) Se novo ponto1 pertence a linha, apagar linha entre ponto1 e novo ponto se não adicionar linha entre ponto1 e novo ponto1;

(4.2) Se novo ponto2 pertence a linha, apagar linha entre ponto2 e novo ponto, senão adicionar linha entre ponto2 e novo ponto2.

(5) Muda Estilo -Inicia com evento dados_estilo_linha

consiste de:

(5.1) Criar padrão para estilo escolhido;

(5.2) Desenhar linha usando algoritmo de construção.

c.2-Processos para a opção triângulo

consiste de:

(1.1) Fixar cor diferente do fundo;

(1.2) Para cada par de pontos ingressados fazer chamada a criar linha.

(2) Algoritmo de desenho para deletar -Iniciar com evento eliminação_triângulo

consiste de:

(2.1) Fixar cor do fundo;

(2.2) Desenhar o triângulo usando o algoritmo de construção.

(3) Transladar objeto -Inicia com evento dados mover1_triângulo,

consiste de:

(3.1) Cálculo do acréscimo em função do novo ponto para cada pixel do objeto. Somar acréscimo.

(4) Muda Estilo -Inicia com evento dados_estilo_triângulo

consiste de:

(5.1) Criar padrão para estilo escolhido;

(5.2) Redesenhar triângulo.

c.3-Processos para a opção retângulo

(1) Algoritmo de desenho para criar -Iniciar com evento dados_criação_retângulo

consiste de:

(1.1) Fixar cor diferente do fundo;

(1.2) Determinar os pontos superior esquerdo e inferior direito em função dos pontos ingresados;

(1.3) Para cada par de pontos com uma das coordenadas iguais, criar linha.

(2) Algoritmo de desenho para deletar -Iniciar com evento eliminação_retângulo

consiste de:

(2.1) Fixar cor do fundo;

(2.2) Desenhar o retângulo usando o algoritmo de construção.

(3) Transladar objeto -Inicia com evento dados mover1_retângulo,

consiste de:

(3.1) Cálculo do acréscimo em função do novo ponto para cada pixel do objeto. Somar acréscimo.

(4) Muda Estilo -Inicia com evento dados_estilo_retângulo

consiste de:

(5.1) Criar padrão para estilo escolhido;

(5.2) Redesenhar retângulo.

c.4-Processos para a opção circunferência

(1) Algoritmo de desenho para criar -Iniciar com evento dados_criação_ circunferência

consiste de:

(1.1) Fixar cor diferente do fundo;

(1.2) Desenhar circunferência usando o algoritmo de construção.

(2) Algoritmo de desenho para deletar -Iniciar com evento eliminação_circunferência,

consiste de:

(2.1) Fixar cor do fundo;

(2.2) Desenhar o circunferência usando o algoritmo de construção.

(3) Transladar objeto -Inicia com evento dados mover1_circunferência,

consiste de:

(3.1) Cálculo do acréscimo em função donovo ponto para cada pixel do objeto. Somar acréscimo.

(4) Muda Estilo -Inicia com evento dados_estilo_circunferência

consiste de:

(5.1) Criar padrão para estilo escolhido;

(5.2) Redesenhar circunferência.

2.2-Diagrama de relação de Entidades

3. Requerimento de Usabilidade

Pretendemos criar um sistema simples (poucos comandos), de fácil aprendizagem (usando menu e ícones) e que permita a realização de poucas tarefas. Não temos a intenção de atingir um específico público alvo. Nosso objetivo é atingir as metas do problema proposto. Não realizamos a coleta de dados para o conhecimento do perfil e necessidades do usuário, mas levamos em consideração  a análise de alguns sistemas similares já existente.
 
 

Projeto Conceitual: Especificações de Requerimento

Grupo 2: Harlen C. Batagelo
 
 

1 - PROJETO CONCEITUAL

1.1 - REQUERIMENTOS FUNCIONAIS

   Inserir primitivas gráficas.    Definir formatação das primitivas a serem inseridas.    Formatar primitiva após ter sido inserida.    Mover primitiva.    Alterar pontos de controle da primitiva.    Apagar primitiva.    Salvar desenho em arquivo.    Recuperar desenho de arquivo.

1.1.1 - RESTRIÇÕES

   Primitivas gráficas possíveis: linhas, triângulos, retângulos e elipses.    As primitivas só podem ser formatadas na largura, estilo e cor de suas linhas de contorno.    Larguras possíveis: muito fina (1 pixel), fina (8 pixels), média (16 pixels), grossa (24 pixels) e muito grossa (32 pixels).    Cores possíveis: preto, azul, verde, ciano, vermelho, magenta, amarelo e branco.    Estilos possíveis: sólido, traçado, pontilhado.    Os estilos só são aplicados em linhas com largura ?muito fina? (1 pixel).    Triângulos, retângulos e elipses não possuem preenchimento.    Somente uma primitiva pode ser formatada de cada vez.

1.2 - REQUERIMENTOS DE DADOS

1.2.1 - ATRIBUTOS DAS PRIMITIVAS GRÁFICAS

LINHA:

   Coordenada inicial.    Coordenada final.    Largura, cor e estilo da linha.

TRIÂNGULO:

   Vértice 1.    Vértice 2.    Vértice 3.    Largura, cor e estilo do contorno.

RETÂNGULO:

   Coordenada inicial (e.g.: ponto superior esquerdo).    Coordenada final (e.g.: ponto inferior direito).    Largura, cor e estilo do contorno.

ELIPSE:

   Coordenada inicial da caixa envoltória contendo a elipse.    Coordenada final da caixa envoltória contendo a elipse.    Largura, cor e estilo do contorno.
 
 

Projeto Conceitual: Especificações de Requerimento

Grupo 3: Luiz Fernando Stein Wetzel

Requerimentos:

1. Criar objetos propriedades default (tamanho, cor, tipo de linha, posição, ...).
2. Comandos para definir as propriedades default de cada objeto gráfico.
3. Objetos mais recentes são desenhados sobre os já existentes (eixo Z).
4. Comandos para mover objetos 1 nível no eixo Z, mover para o topo ou para o último plano.
5. Pilha de tamanho indefinido de Undo / Redo.
6. Objetos gráficos suportados: linhas, círculos, triângulos, retângulos.
7. Objetos podem ser movidos, redimensionados ou ter qualquer outra propriedade editada.
8. Suporte a comandos Copy, Cut, Paste (Clipboard).
9. Suporte a object mode e command mode.
10. Suporta múltipla seleção para comandos Move, Delete, Copy, Cut (object mode somente).
11. Objeto selecionado deve ser desenhado no topo, mas quando deixa de estar selecionado volta à posição original (eixo Z).
12. Objeto selecionado deve desenhar pequenos quadrados nos pontos que podem ser arrastados com o mouse. O cursor deve ser  nesses quadrados.
13. Retas podem ter as extremidades arrastadas.
14. Retângulos e triângulos podem ter os vértices arrastados.
15. Documentos podem ser salvos e recuperados de arquivos.
16. Triângulo, retângulo e circulos devem ser desenhados com cores sólidas.
17. Propriedades de Reta:

• Estilo (dash, solid, dotted)
• Cor
• Endpoint1, Endpoint2

18. Propriedades do Triângulo:

• Cor
• Vértice1, Vértice2, Vértice3

19. Propriedades do Retângulo:

• Top, Left, Bottom, Right
• Cor

20. Propriedades do Círculo:

• Raio
• Centro
• Cor

Grupo 4: Jorge Kawamura e Paulo Guilherme Seifer
 
 

1. Requerimentos de usuário:

• Menu, contendo todos os comandos para manipulação dos elementos gráficos e arquivos contendo os elementos gráficos;
• Palhetas ou Speed Bar, onde os comandos do Menu são iconizados ou representados na forma de ícones, para assim haver acesso rápido desses comandos;
• WYSIWYG é a área de trabalho, isto é local onde a figura é desenhada (desenhada dentro de uma janela);
• Linha de comando, local onde podemos complementar algum comando, ou acessá-los diretamente;
• Determinados dados podem ser inseridos em janelas específicas;
• Área de resposta do sistema para o usuário (por exemplo Status Bar)
• Atalhos para comandos ;
• Visualização da peça em 3D mais 3 vistas ortográficas, isto é, 3 janelas onde podemos ver a figura em diferentes modos;
• Tipos diferentes de linha;
• Renderização da figura 3D;

• Manipulação de elementos (mover, rotacionar, alterar tamanho );
• Help com objetivo e conteúdo;
• Seleção de cor;
• Dividir o Menu, as Palhetas, as áreas de trabalho, barra de status em diferentes janelas, para podermos manipular essas janelas;
• Possuir indicações, quando passamos o mouse em cima do ícone, dizendo qual é a função daquele comando (Hint);
• As janelas devem ser nomeadas indicando qual a função geral delas;

• Desenhar formas geométricas (linhas, circunferências, esferas, elipses e polígonos);
• Deletar elementos (formas geométricas);
• Deletar região selecionada ou parte dela (Trim);
• Undo Multinível;
• Ler os pontos e o programa deve interpretá-los;
• Snaps (localizar e fixar o cursor em um elemento );
• Cálculo de área e volume;
• Zoom nos elementos ou na figura;
• Realizar as funções de : copiar, salvar, abrir, fechar, imprimir, colar, outros;
• Manipulação de elementos (mover, rotacionar, );
• Realizar alteração de escalas;
• Realizar rotação de elementos;
• Redesenhar figura;
• Função de seleção do elemento.