Graficación

UNIDAD I.- INTRODUCCIÓN A LA GRAFICACIÓN POR COMPUTADORA

___________________________________________________________________
LECCIÓN 1.2.- Dispositivos de hardware y software para el
despliegue gráfico
___________________________________________________________________

1.2.2.- Arquitectura Modelo-Vista-Controlador

En MVC cada elemento tiene tres partes:

• Un modelo que contiene los datos y la funcionalidad de la aplicación
• Una vista que gestiona como se muestran esos datos
• Un controlador que determina que modificaciones hay que hacer en el modelo cuando
se interacciona con la vista.

Rafael Rivera López

1
Graficación

La forma de implementar MVC en Java es:

public class Aplicación {

public static void main(String[] args) {

JFrame f = new Jframe("Ventana Principal");
Modelo modelo = new Modelo();
Vista panel = new Vista(modelo);
Controlador oyente = new Controlador(modelo,panel);
panel.addEventos(oyente);
f.setSize(800,600);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(panel);
f.setVisible(true);
}
}

public class Vista extends JPanel {

private Modelo modelo;

public Vista(Modelo modelo){

this.modelo = modelo;
initComponents();
}

public addEventos(Controlador oyente){

addXXXListener(oyente);
}

...
}

public class Controlador implements XXXListener{

private Modelo modelo;
private Vista vista;

public Controlador(Modelo modelo, Vista vista) {

this.modelo = modelo;
this.vista = vista;
}

...
}

Rafael Rivera López

2
Graficación

1.2.3.- Ejemplo de Modelos

Interfaz Dibujable
package modelos;

import java.awt.*;

public interface Dibujable {

public void dibujar(Graphics g);

Rafael Rivera López

3
Graficación

Clase Punto
package modelos;

import java.awt.*;

public class Punto extends Point implements Dibujable {

private int radio;

private Color color;

public Punto(int x, int y, int radio, Color color) {

super(x, y);
this.radio = radio;
this.color = color;
}

public Punto() {
this(0, 0, 0, Color.BLACK);
}

public int getRadio() {

return radio;
}

public void setRadio(int radio) {

this.radio = radio;
}

public Color getColor() {

return color;
}

public void setColor(Color color) {

this.color = color;
}

@Override
public void dibujar(Graphics g) {
g.setColor(color);
g.fillOval(x - radio, y - radio, 2 * radio, 2 * radio);
g.setColor(Color.BLACK);
g.drawOval(x - radio, y - radio, 2 * radio, 2 * radio);
}
}

Rafael Rivera López

4
Graficación

Clase Puntos
package modelos;

import java.awt.Graphics;
import java.util.ArrayList;

public class Puntos extends ArrayList<Punto> implements Dibujable {

@Override
public void dibujar(Graphics g) {
for (Punto punto : this) {
punto.dibujar(g);
}
}
}

Rafael Rivera López

5
Graficación

1.2.4.- Ejemplo de vista

Clase PanelPuntos (configurarla como un Bean)

package vistas;

import java.awt.*;
import javax.swing.*;
import modelos.*;

public class PanelPuntos extends JPanel {

private Puntos puntos;

public PanelPuntos(Puntos puntos) {

this.puntos = puntos;
setBackground(Color.CYAN);
}

public PanelPuntos() {
this(new Puntos());
}

@Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
puntos.dibujar(g);
}

public Puntos getPuntos() {

return puntos;
}

public void setPuntos(Puntos puntos) {

this.puntos = puntos;
}
}

Rafael Rivera López

6
Graficación

1.2.5.- Ejemplo para mostrar un conjunto de puntos

package usopuntos;

import java.awt.*;
import javax.swing.*;
import modelos.*;
import vistas.*;

public class UsoPuntos {

public static void main(String[] args) {

Puntos puntos = new Puntos(); //MODELO
puntos.add(new Punto(100, 100, 10, Color.BLUE));
puntos.add(new Punto(200, 300, 10, Color.BLUE));
puntos.add(new Punto(300, 100, 10, Color.BLUE));

PanelPuntos panel = new PanelPuntos(puntos); // VISTA

JFrame f = new JFrame("Representación de puntos");

f.setSize(800, 600);
f.setLocation(100, 100);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(panel);
f.setVisible(true);
}
}

1.2.6.- Ejemplo de Controlador para adicionar puntos con el ratón

Rafael Rivera López

7
Graficación

Clase OyentePuntos
package controladores;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import modelos.*;

public class OyentePuntos extends MouseAdapter {

protected Puntos puntos;

protected JPanel panel;

public OyentePuntos(Puntos puntos, JPanel panel) {

this.puntos = puntos;
this.panel = panel;
}

@Override
public void mouseClicked(MouseEvent e) {
int x = e.getX();
int y = e.getY();
Punto punto = new Punto(x, y, 10, Color.BLUE);
puntos.add(punto);
panel.repaint();
}
}

1.2.7.- Ejemplo para poner puntos en el contexto gráfico

La clase OyenteManejoPuntos podrá:
• Adicionar puntos (heredando de OyentePuntos)
• Lmpiar el contexto gráfico usando un botón (debe implementar ActionListener).

Rafael Rivera López

8
Graficación

package manejopuntos;

import javax.swing.*;
import modelos.*;

public class ManejoPuntos {

public static void main(String[] args) {
JFrame f = new JFrame("Manejo de Puntos");

Puntos puntos = new Puntos(); // MODELO

PanelManejoPuntos panel = new PanelManejoPuntos(puntos); //VISTA
OyenteManejoPuntos oyente =
new OyenteManejoPuntos(puntos,panel); // CONTROLADOR
panel.addEventos(oyente);

f.setSize(800,600);
f.setLocation(100,100);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setContentPane(panel);
f.setVisible(true);
}
}

Rafael Rivera López

9
Graficación

Clase PanelManejoPuntos
package manejopuntos;

import modelos.Puntos;

public class PanelManejoPuntos extends javax.swing.JPanel {

public PanelManejoPuntos(Puntos puntos) {

initComponents();
panelPuntos.setPuntos(puntos);
}

public PanelManejoPuntos() {
initComponents();
}

public void addEventos(OyenteManejoPuntos oyente) {

botonLimpiar.addActionListener(oyente);
panelPuntos.addMouseListener(oyente);
}

@SuppressWarnings("unchecked")
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void initComponents() {

panelNorte = new javax.swing.JPanel();

botonLimpiar = new javax.swing.JButton();
panelPuntos = new vistas.PanelPuntos();

setLayout(new java.awt.BorderLayout());

botonLimpiar.setText("Limpiar Panel");
panelNorte.add(botonLimpiar);

add(panelNorte, java.awt.BorderLayout.NORTH);
add(panelPuntos, java.awt.BorderLayout.CENTER);
}// </editor-fold>

// Variables declaration - do not modify

private javax.swing.JButton botonLimpiar;
private javax.swing.JPanel panelNorte;
private vistas.PanelPuntos panelPuntos;
// End of variables declaration
}

Rafael Rivera López

10
Graficación

Clase OyenteManejoPuntos
package manejopuntos;

import controladores.*;
import java.awt.event.*;
import javax.swing.*;
import modelos.Puntos;

public class OyenteManejoPuntos

extends OyentePuntos implements ActionListener {

public OyenteManejoPuntos(Puntos puntos, JPanel panel) {

super(puntos, panel);
}

@Override
public void actionPerformed(ActionEvent e) {
puntos = new Puntos();
panel.repaint();
}
}

1.2.8.- Ejemplo de Controlador para mover puntos con el ratón

Rafael Rivera López

11
Graficación

Clase: OyenteMoverPuntos
package controladores;

import java.awt.event.*;
import javax.swing.JPanel;
import modelos.*;

public class OyenteMoverPuntos extends OyentePuntos

implements MouseMotionListener {

private boolean seleccionado;

private Punto puntoSeleccionado;

public OyenteMoverPuntos(Puntos puntos, JPanel panel) {

super(puntos, panel);
}

@Override
public void mousePressed(MouseEvent e) {
for (Punto pto : puntos) {
if (pto != null) {
double d = pto.distance(e.getX(), e.getY());
if (d <= pto.getRadio()) {
seleccionado = true;
puntoSeleccionado = pto;
}
}
}
}

@Override
public void mouseReleased(MouseEvent e) {
seleccionado = false;
}

@Override
public void mouseDragged(MouseEvent e) {
if (seleccionado) {
puntoSeleccionado.move(e.getX(), e.getY());
panel.repaint();
}
}
}

Rafael Rivera López

12
Graficación

1.2.9.- Ejemplo de aplicación para poner y mover puntos en el contexto gráfico

package movimientopuntos;

import javax.swing.*;
import modelos.*;

public class MovimientoPuntos {

public static void main(String[] args) {

JFrame f = new JFrame("Manejo con Movimiento de Puntos");
Puntos puntos = new Puntos(); // MODELO
PanelMovimientoPuntos panel =
new PanelMovimientoPuntos(puntos); //VISTA
OyenteMovimientoPuntos oyente =
new OyenteMovimientoPuntos(puntos,panel); // CONTROLADOR
panel.addEventos(oyente);
f.setSize(800,600);
f.setLocation(100,100);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(panel);
f.setVisible(true);
}
}

Rafael Rivera López

13
Graficación

Clase PanelMovimientoPuntos
package movimientopuntos;

import modelos.Puntos;

public class PanelMovimientoPuntos extends javax.swing.JPanel {

public PanelMovimientoPuntos(Puntos puntos) {

initComponents();
panelCentro.setPuntos(puntos);
}

public void addEventos(OyenteMovimientoPuntos oyente) {

botonLimpiar.addActionListener(oyente);
panelCentro.addMouseListener(oyente);
panelCentro.addMouseMotionListener(oyente);
}

@SuppressWarnings("unchecked")
// <editor-fold defaultstate="collapsed" desc="Generated Code">//GEN-
BEGIN:initComponents
private void initComponents() {

panelNorte = new javax.swing.JPanel();

botonLimpiar = new javax.swing.JButton();
panelCentro = new vistas.PanelPuntos();

setLayout(new java.awt.BorderLayout());

botonLimpiar.setText("Limpiar Panel");
panelNorte.add(botonLimpiar);

add(panelNorte, java.awt.BorderLayout.NORTH);

panelCentro.setLayout(new java.awt.BorderLayout());
add(panelCentro, java.awt.BorderLayout.CENTER);
}// </editor-fold>//GEN-END:initComponents

// Variables declaration - do not modify//GEN-BEGIN:variables

private javax.swing.JButton botonLimpiar;
private vistas.PanelPuntos panelCentro;
private javax.swing.JPanel panelNorte;
// End of variables declaration//GEN-END:variables
}

Rafael Rivera López

14
Graficación

Clase OyenteMovimientoPuntos
package movimientopuntos;

import controladores.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;
import modelos.*;

public class OyenteMovimientoPuntos extends OyenteMoverPuntos

implements ActionListener{

public OyenteMovimientoPuntos(Puntos puntos, JPanel panel) {

super(puntos, panel);
}

@Override
public void actionPerformed(ActionEvent e) {
puntos.clear();
panel.repaint();
}
}

Rafael Rivera López

15
Graficación

1.2.10.- Ejemplo para manejo de curvas Bezier

Curva cuadrática:
– Una curva cuadrática definida matemáticamente como un polinomio cuadrático
especificado por tres puntos de control.
– El primer y último punto son los extremos de la curva. El punto medio define la tendencia
de la curva.

Curva cúbica:
– Representa una curva Bezier cúbica, con cuatro puntos e control

Rafael Rivera López

16
Graficación

Clase Bezier
package modelos;

import java.awt.Color;
import java.awt.Graphics;

public class Bezier extends Puntos {

private int tamaño;
private Color color;

public Bezier() {
this(Color.BLACK);
}

public Bezier(Color color) {

this.color = color;
}

@Override
public void dibujar(Graphics g) {
if (isEmpty()) {
return;
}
super.dibujar(g);
if (size() == tamaño) {
double inc = 0.005;
g.setColor(color);
Punto p0 = get(0);
Punto p1 = get(1);
Punto p2 = get(2);
switch (tamaño) {
case 3: // Dibujar una curva cuadrática
for (double t = 0; t <= 1; t += inc) {
double x = Math.pow(1 - t, 2) * p0.x
+ 2 * t * (1 - t) * p1.x
+ t * t * p2.x;
double y = Math.pow(1 - t, 2) * p0.y
+ 2 * t * (1 - t) * p1.y
+ t * t * p2.y;
g.fillOval((int) x - 2, (int) y - 2, 4, 4);
}
break;
case 4: // Dibujar una curva cúbica
Punto p3 = get(3);
for (double t = 0; t <= 1; t += inc) {
double x = Math.pow(1 - t, 3) * p0.x

Rafael Rivera López

17
Graficación

+ 3 * Math.pow(1 - t, 2) * t * p1.x
+ 3 * (1 - t) * t * t * p2.x
+ t * t * t * p3.x;
double y = Math.pow(1 - t, 3) * p0.y
+ 3 * Math.pow(1 - t, 2) * t * p1.y
+ 3 * (1 - t) * t * t * p2.y
+ t * t * t * p3.y;
g.fillOval((int) x - 2, (int) y - 2, 4, 4);
}
}
}
}

public int getTamaño() {

return tamaño;
}

public void setTamaño(int tamaño) {

this.tamaño = tamaño;
}
}

Rafael Rivera López

18
Graficación

package curvasbezier;

import javax.swing.*;
import modelos.*;

public class CurvasBezier {

public static void main(String[] args) {

JFrame f = new JFrame("Representación de Curvas Bezier");
Bezier curva = new Bezier(); // MODELO
PanelBezier panel = new PanelBezier(curva); //VISTA
OyenteBezier oyente =
new OyenteBezier(curva, panel); // CONTROLADOR
panel.addEventos(oyente);
f.setSize(800, 600);
f.setLocation(100, 100);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(panel);
f.setVisible(true);
}
}

Rafael Rivera López

19
Graficación

Clase PanelBezier
package curvasbezier;

import modelos.Bezier;

public class PanelBezier extends javax.swing.JPanel {

public PanelBezier(Bezier bezier) {

initComponents();
panelCentro.setPuntos(bezier);
}

public void addEventos(OyenteBezier oyente){

this.botonCuadratica.addActionListener(oyente);
this.botonCubica.addActionListener(oyente);
panelCentro.addMouseListener(oyente);
panelCentro.addMouseMotionListener(oyente);
}

@SuppressWarnings("unchecked")
private void initComponents() {
panelNorte = new javax.swing.JPanel();
botonCuadratica = new javax.swing.JButton();
botonCubica = new javax.swing.JButton();
panelCentro = new vistas.PanelPuntos();
setLayout(new java.awt.BorderLayout());
botonCuadratica.setText("Curva Cuadrática");
botonCuadratica.setName("cuadratica"); // NOI18N
panelNorte.add(botonCuadratica);
botonCubica.setText("Curva Cúbica");
botonCubica.setName("cubica"); // NOI18N
panelNorte.add(botonCubica);
add(panelNorte, java.awt.BorderLayout.NORTH);
panelCentro.setLayout(new java.awt.BorderLayout());
add(panelCentro, java.awt.BorderLayout.CENTER);
}// </editor-fold>//GEN-END:initComponents

// Variables declaration - do not modify//GEN-BEGIN:variables

private javax.swing.JButton botonCuadratica;
private javax.swing.JButton botonCubica;
private vistas.PanelPuntos panelCentro;
private javax.swing.JPanel panelNorte;
// End of variables declaration//GEN-END:variables
}

Rafael Rivera López

20
Graficación

Clase: OyenteBezier
package curvasbezier;

import controladores.*;
import java.awt.event.*;
import javax.swing.*;
import modelos.*;

public class OyenteBezier extends OyenteMoverPuntos

implements ActionListener {

public OyenteBezier(Puntos puntos, JPanel panel) {

super(puntos, panel);
Bezier bezier = (Bezier)puntos;
bezier.setTamaño(3);
}

@Override
public void actionPerformed(ActionEvent e) {
JComponent origen = (JComponent) e.getSource();
Bezier bezier = (Bezier)puntos;
bezier.clear();
switch (origen.getName()) {
case "cuadratica":
bezier.setTamaño(3);
break;
case "cubica":
bezier.setTamaño(4);
}
panel.repaint();
}

@Override
public void mouseClicked(MouseEvent e) {
Bezier bezier = (Bezier) puntos;
if (bezier.size() < bezier.getTamaño()) {
super.mouseClicked(e);
}
}
}

Rafael Rivera López

21