INGENIERÍA EN SISTEMAS

COMPUTACIONALES
PRÁCTICA No. 4

DATOS GENERALES
ASIGNATURA: GRAFICACION

TÍTULO DE LA PRÁCTICA: REPRESENTACIÓN MATRICIAL DE LAS

TRANSFORMACIONES BIDIMENSIONALES “TRASLACIÓN”

DOCENTE: MTRA. ROCÍO CAYETANO MELÉNDEZ

ESTUDIANTE(S) : FECHA
Guzman Mejia Antonio Jireth 09/10/2023

OBJETIVO DE LA PRÁCTICA

Representar la transformación bidimensional a través de la traslación utilizando la clase

Graphics2D, en Java usando el IDE de Apache Netbeans a través de JFrame.
COMPETENCIA(S) ESPECÍFICA(S) COMPETENCIA(S) GENÉRICA(S)
Programar un objeto y haciendo uso de Capacidad de análisis y síntesis
coordenadas mover el objeto. Capacidad de resolver problemas

REQUERIMIENTOS
PROCEDIMIENTOS
PASO 1: Utilizando el proyecto gráficos Java, vamos a crear un nuevo paquete llamado
“Practica3”.

PASO2: Dentro del paquete vamos a crear un JframeForms que llamaremos: Traslacion, vamos a
asegurarnos de que estemos en la pestaña de diseño(Design).
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

PASO3: Vamos a agregar 2 Jlabel(que diga X y Y), 2 JtextField (para agregar las coordenadas de
traslación, hay que hacer más anchos los JtextField para poder agregar los valores una vez ejecutado
el programa)y un botón que diga: trasladar, para que nos cambie la posición del objeto.

PASO4: Nos pasaremos a la pestaña Source o código fuente, vamos a posicionarnos despues de la
declaración de la clase y colocaremos el tamaño y posición de nuestra figura geométrica.

public class Traslacion extends java.swing.JFrame {

int x=0;
int y=0;
int ancho=100;
int alto=100;
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

PASO5: Vamos a regresar a la pestaña de diseño(Design), vamos a darle doble clic al boton para
acceder a su código, y vamos a extraer las variables directamente de los JtextField. Despues de:

Private void jButton1ActionPerformed(Java.awt.event.ActionEvent evt) {

Escribiremos lo siguiente:

x=Integer.paseInt(jTextField1.getText());
y=Integer.paseInt(jTextField2.getText());
repaint();
}

Aqui estamos obteniendo el valor directamente de x del jTextField1 y el valor de y del jTextField2.
Y al momento de obtenerlos realizamos un repintado de nuestro Jframe, que en este caso vamos a
utilizar un panel para que se pueda mostrar nuestra figura geometrica.
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

PASO6: Para hacer el panel nos posicionaremos casi al final de la clase, para que podamos crear
una nueva clase la cual nos va a servir como panel para poder dibujar nuestra figura geométrica que
en este caso es un cuadrado, aquí utilizaremos el método translate, para posicionar nuestra figura
geométrica en el espacio del Jframe. Posteriormente dibujamos nuestra figura geometrica que es un
cuadrado.

PASO7: Por último iremos al constructor de la clase traslación para poder pintar el panel que en
el paso anterior se a caba de hacer en el Jframe de inicio.
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

PASO8: Ahora ejecutaremos la aplicación, y nos mostrará lo siguiente:

PASO9: Ahora le diremos al programa que recorra 100 posiciones en x y 0 en y.

Posteriormente daremos en trasladar.

RECURSOS MATERIALES RECURSOS TÉCNICOS/TECNOLÓGICOS

Java usando el IDE de Apache Netbeans a Pc.
través de JFrame.

MARCO TEÓRICO
Es importante mencionar que existen varias transformaciones en 2D pero en este contenido solo se
abordaran: Escalamiento, Rotación, Traslación, Recorte e Inversión. Estas transformaciones juegan un
papel fundamental en la construcción y edición de todo tipo de imágenes digitales.
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

RESULTADOS
En esta primera parte se importaron las librerías que se ocuparon en esta práctica que
fueron 3, también declaramos nuestras variables X y Y que las inicializamos en 0 hasta
que el usuario les dé un valor, también pusimos el ancho y alto de nuestro cuadrado,
también en el constructor que se llama traslación agregamos dos this,conten pane y
location para poder pintar el panel

En la siguiente parte están todos los componentes de nuestra interfaz, y están

declarados los 2 label, los 2 texfiel y el botón, aquí mismo esta todo el diseño de la
misma
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

Ahora creamos un evento para nuestro botón, este evento lo que hace que al nosotros
presionar el botón este realizara una acción, en este caso cuando obtenemos los valores
de x y y, lo que hace es un repintado en nuestro jframe que cambiaría de posición
nuestro cuadrado
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

En esta parte solo esta nuestra clase principal

Después de esto vamos a crear nuestro panel para esto crearemos una nueva clase la
cual llamamos Gráficos, esta clase nos servirá para poder visualizar nuestra figura
geométrica
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

Y así quedo nuestro ventana de diseño, así es como lo vera el usuario al ejecutarlo

Aquí ya ejecutamos el programa y nos aparece nuestra figura geométrica con el color
que le dimos y inicia en las coordenadas 0 porque así la inicializamos pero al momento
de darle valores a X, Y y darle al botón de trasladar este cambia de posición.
 DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
MANUAL DE PRÁCTICAS DE LA ASIGNATURA TALLER DE BASES DE DATOS

10

CONCLUSIONES

En conclusión la practica fue de mucha utilidad para comprender un poco mas el graficar
por NetBeans que es un programa el cual ya teníamos conocimientos previos y se nos
facilitó, con esta practica comprendimos cuales son las librerías para graficar, como
darle un evento a un botón, como darle coordenadas o como decirle al usuario que le de
sus coordenadas, también las dimensiones de este.

FUENTE(S) DE INFORMACIÓN

https://leslycastellanos.blogspot.com/p/unidad-2.html