Вы находитесь на странице: 1из 14

Graficación

UNIDAD II.- GRAFICACIÓN 2D


___________________________________________________________________
LECCIÓN 2.1.- Trazo de Líneas Rectas
___________________________________________________________________

2.1.1.- Sistema de coordenadas

Para ubicar los objetos gráficos se utiliza un sistema de coordenadas

Representación de objetos gráficos:


Se hace utilizando una ecuación que define la relación que deben satisfacer todas las
coordenadas ( x , y ) del objeto.

• Linea: Ax + By+ C=0


2 2 2
• Círculo con centro en el origen de coordenadas: x + y =r

Rafael Rivera López


1
Graficación

2 2
( x 0, y 0 ) :
( x−x 0 ) ( y− y 0 )
• Elipse con centro en + =1
a2 b2

Ecuación Paramétrica: Una ecuación paramétrica proporciona una forma explícita para
evaluar las coordenadas.

• Elipse con centro en ( x 0, y 0 ) : x= x 0+ a cos (t) y y= y 0 +bsin(t ) .

Espacios: Existen tres espacios:


• Espacio del objeto: El centro del sistema de coordenadas coincide con el centro del
objeto.
• Espacio del mundo: Define un espacio de referencia común a todos los objetos
gráficos de la escena.
• Espacio del dispositivo: Es el espacio de referencia del dispositivo de despliegue.

En Java, el espacio del mundo es el mismo del espacio del dispositivo.

Rafael Rivera López


2
Graficación

2.1.2.- Clases gráficas en Java

En Java se utiliza un objeto como motor de interpretación de las primitivas gráficas, a este
objeto se le conoce como contexto gráfico o simplemente brocha.

– java.awt.Graphics: Contiene métodos básicos para interpretar primitivas gráficas y


controlar los modos de despliegue.
– java.awt.Graphics2D: es una forma mejorada del objeto Graphics.

Formas de obtener una referencia al contexto gráfico:

– Utilizando el argumento del método paint(Graphics) de la clase Frame o del método


paintComponent(Graphics) de la clase Jframe.
– Utilizando el método getGraphics()

La clase Graphics: Cada método ejecuta la modelación del objeto gráfico para luego
realizar la interpretación sobre el dispositivo de despliegue:

void setColor(Color c)
void setFont(Font f)
void translate(int x, int y)
void drawLine(int x1, int y1, int x2, int y2)

Rafael Rivera López


3
Graficación

void drawRect(int x1, int y1, int width, int height)


void drawOval(int x1, int y1, int width, int height)
void drawArc(int x1, int y1, int width, int height, int start, int arc)
void drawRoundRect(int x1, int y1, int width, int height, int arcW, int arcH)
void drawPolygon(int[] xPoints, int[] yPoints, int nPoints)
void fillRect(int x1, int y1, int width, int height)
void fillOval(int x1, int y1, int width, int height)
void fillArc(int x1, int y1, int width, int height, int start, int arc)
void fillRoundRect(int x1, int y1, int width, int height, int arcW, int arcH)
void fillPolygon(int[] xPoints, int[] yPoints, int nPoints)
void drawString(String str, int x, int y)

La clase Graphics2D: En esta clase el modelado se hace de forma separada a la


interpretación. Cada figura a dibujar en el contexto gráfico está asociada a un objeto, con
propiedades y comportamiento.

void draw(Shape s)
void fill(Shape s)
void setTransform(AffineTransform Tx)
void transform(AffineTransform Tx)
void setPaint(Paint p)
void setStroke(Stroke s)
void clip(Shape s)

Rafael Rivera López


4
Graficación

2.1.3.- Modelos gráficos

• Un objeto gráfico se puede dibujar si implementa la interfaz Shape.


• Los métodos draw() y fill() reciben un objeto Shape.

Clases
• Line2D, QuadCurve2D, CubicCurve2D, Rectangle2D, RoundRectangle2D, Arc2D,
Ellipse2D
• Cada una tiene dos subclases internas X.Double y X.Float que representan las

Rafael Rivera López


5
Graficación

coordenadas utilizando tipos double o float


Línea:
• Line2D line = new Line2D.Double(x1, y1, x2, y2);

Rectángulos:
• Rectangle2D ri = new Rectangle(x1,y1,ancho,alto);
• Rectangle2D rd = new Rectangle2D.Double(x1,y1,ancho,alto);
• Rectangle2D rf = new Rectangle2D.Float(x1,y1,ancho,alto);

• RoundRectangle2D rrect =
new RoundRectangle2D.Double(x1,y1,ancho,alto,xDiam,yDiam);

Elipse:
• Ellipse2D ellipse = new Ellipse2D.Float(x1,y1,ancho,alto);

Clase UsoGraphics2D
package usographics2d;

import javax.swing.*;

public class UsoGraphics2D {

public static void main(String[] args) {


JFrame f = new JFrame("Uso de elementos de Graphics2D");
f.setSize(800, 600);
f.setLocation(50, 100);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(new PanelGraphics2D());
f.setVisible(true);
}
}

Rafael Rivera López


6
Graficación

Clase PanelGraphics2D
package usographics2d;

public class PanelGraphics2D extends javax.swing.JPanel {

public PanelGraphics2D() {
initComponents();
panelCentro.addTab("Gradientes", new PanelGradiente());
panelCentro.addTab("Texturas", new PanelTextura());
panelCentro.addTab("Líneas", new PanelLineas());
panelCentro.addTab("Curvas", new PanelCurvas());
panelCentro.addTab("Áreas", new PanelAreas());
panelCentro.addTab("Estrella", new PanelEstrella());
}
private void initComponents() {

panelCentro = new javax.swing.JTabbedPane();

setBorder(
javax.swing.BorderFactory.createLineBorder(getBackground(), 15));
setLayout(new java.awt.BorderLayout());
add(panelCentro, java.awt.BorderLayout.CENTER);
}// </editor-fold>

// Variables declaration - do not modify


private javax.swing.JTabbedPane panelCentro;
// End of variables declaration
}

2.1.4.- Colores, Gradientes y Texturas

Color: Para definir un color se utiliza el método setColor

– void setColor(Color c)

Colores: black, blue, cyan, darkGray, gray, green,


lightGray, magenta, orange, pink, red, white, yellow

Rafael Rivera López


7
Graficación

Creando un color basado en el constructor y los valores de rojo, verde y azul:


• Color(int r, int g, int b);
• Color(int rgb);
• Color(float r, float g, float b);

Interfaz Paint
• La interfaz Paint es una generalización de color.
• Se utiliza el método setPaint(Paint p).

Clase GredientPaint
• Define el pintado usando varios colores.
• Se define con dos puntos y dos colores. El color cambia del primero al segundo del
punto inicial al punto final.
• Este cambio puede ser cíclico o no:
• Acíclico: GradientPaint(float x1, float y1, Color c1, float x2, float y2, Color c2);
• Cíclico o acíclico:
GradientPaint(float x1, float y1, Color c1, float x2, float y2, Color c2, boolean cycl);

Rafael Rivera López


8
Graficación

Clase PanelGradiente
package usographics2d;
import java.awt.*;
import javax.swing.*;
import static java.awt.Color.*;

public class PanelGradiente extends JPanel{


private Point[] puntos;
private Shape[] formas;
private GradientPaint[] gradientes;

public PanelGradiente(){
setBackground(CYAN);
crearGradientes();
}

public final void crearGradientes(){


puntos = new Point[8];
int x[] = {150,250,500,600,150,250,500,600};
int y[] = {150,150,150,150,350,450,350,450};
for(int i=0;i<x.length;i++){
puntos[i] = new Point(x[i],y[i]);
}
Color[] colores = {RED,BLUE,MAGENTA,YELLOW,GREEN,GRAY,ORANGE,DARK_GRAY};
gradientes = new GradientPaint[4];
for(int i=0;i<4;i++){
gradientes[i] =
new GradientPaint(puntos[i*2 ],colores[i*2],
puntos[i*2+1],colores[i*2+1],i%2!=0);
}

Rafael Rivera López


9
Graficación

@Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
int[] x = { 50,400, 50,400};
int[] y = { 50, 50,300,300};
for(int i=0;i<4;i++){
g2.setPaint(gradientes[i]);
g2.fillRect(x[i],y[i],300,200);
}
g2.setColor(BLACK);
for(Point punto:puntos){
g2.fillOval(punto.x-2,punto.y-2,4,4);
g2.drawString("("+punto.x+","+punto.y+")",punto.x-30,punto.y-10);
}
}
}

Clase TexturePaint
• Define una textura para un objeto gráfico.
◦ TexturePaint(BufferImage image, Rectangle2D anchor);

Rafael Rivera López


10
Graficación

Clase PaneTextura
package usographics2d;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;

public class PanelTextura extends JPanel {


private TexturePaint textura;

public PanelTextura() {
setBackground(Color.CYAN);
crearTextura();
}

public final void crearTextura() {


BufferedImage imagen = null;
String path = "/imagenes/veracruz.jpg";
try {
imagen = ImageIO.read(getClass().getResource(path));
} catch (IOException e) {
System.out.println("Error " + e);
System.exit(-1);
}
int ancho = imagen.getWidth();
int alto = imagen.getHeight();
Rectangle2D area = new Rectangle2D.Double(0, 0,ancho,alto);
textura = new TexturePaint(imagen, area);
}

@Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g2.setPaint(textura);
g2.fillRect( 0, 0,380,270);
g2.fillOval(380, 0,380,270);
g2.setPaint(Color.BLUE); // <==
g2.fillRect( 0,270,380,270);
g2.fillOval(380,270,380,270);
g2.setPaint(textura);
}
}

Rafael Rivera López


11
Graficación

2.1.5.- Trazado de Líneas

Trazos: Son los detalles del trazado de líneas

Clase para trazado: BasicStroke.


– BasicStroke()
– BasicStroke(float width)
– BasicStroke(float width, int cap, int join)
– BasicStroke(float width, int cap, int join, float miterlimit)
– BasicStroke(float width, int cap, int join, float miterlimit, float[] dash, float dashphase)

Tabla: Parámetros para el trazado


Parámetros Descripción
width El ancho del trazo.
cap Estilo de la terminación de la línea:
CAP_BUTT, CAP_ROUND, CAP_SQUARE
join El estilo de la unión de trazos:

JOIN_BEVEL, JOIN_MITER, JOIN_ROUND


miterlimit Ajusta el límite de un JOIN_MITER cuando el ángulo dentre las líneas es
muy pequeño.
dash El patrón de punteado de los segmetos
dashphase El punto inicial del patron de punteado.

El método que se utiliza para definir un trazo es:


• void setStroke(Stroke s)

Rafael Rivera López


12
Graficación

Clase PanelLineas
package usographics2d;

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

public class PanelLineas extends JPanel{

public PanelLineas(){
setBackground(Color.CYAN);
}

@Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
dibujarLineaAWT(g2);
dibujarLineaG2(g2);
dibujarCuadrado(g2);
}

public void dibujarLineaAWT(Graphics2D g2){


g2.setColor(Color.GREEN);
g2.drawLine( 50,100,700,100);
}

public void dibujarLineaG2(Graphics2D g2){


BasicStroke tipo = new BasicStroke(10,BasicStroke.CAP_ROUND,
BasicStroke.JOIN_BEVEL);

Rafael Rivera López


13
Graficación

g2.setColor(Color.RED);
g2.setStroke(tipo);
g2.drawLine(50,200,700,200);
}

public void dibujarCuadrado(Graphics2D g2){


float[] trama = {45,5,5,5};
BasicStroke tipo = new BasicStroke(5,BasicStroke.CAP_BUTT,
BasicStroke.JOIN_MITER,1,trama,30);
Rectangle2D cuadrado = new Rectangle2D.Double(50,300,650,200);
g2.setColor(Color.BLUE);
g2.setStroke(tipo);
g2.drawRect(50,300,650,200);
}
}

Rafael Rivera López


14