GRAFICACION 2D

JAVA 2D
MARTHA PATRICIA PIÑA VILLANUEVA
https://docs.oracle.com/javase/8/javase-clienttechnologies.htm
 Introducción
La creación de un programa JavaFX comienza con la clase Application,
desde la que se extienden todas las aplicaciones JavaFX. Su clase
principal debe llamar al método launch(), que entonces llamará al
método init() ya continuación al método start(), esperará a que finalice
la aplicación y, a continuación, llame al método stop(). De estos
métodos, sólo el método start() es abstracto y debe anularse.

La clase Stage es el contenedor JavaFX de nivel superior. Cuando se

inicia una aplicación, se crea una fase inicial y se pasa al método de
inicio de la aplicación. Las etapas controlan las propiedades básicas de
la ventana, como título, icono, visibilidad, resizable, modo de pantalla
completa y decoraciones; El último se configura usando StageStyle.
Pueden construirse Stages adicionales según sea necesario. Después
de que se ha configurado una etapa y se agrega el contenido, se llama
al método show().
 Estructuración del Contenido
• El contenido en JavaFX (como el texto, las
imágenes y los controles de interfaz de
usuario) se organiza utilizando una
estructura de datos similar a un árbol,
conocida como una gráfico de escena,
que agrupa y organiza los elementos de
una gráfico de escena .
Un elemento general de un gráfico de escena
en JavaFX se denomina Nodo. Cada Nodo en
un árbol tiene un único nodo "padre", con la
excepción de un nodo especial designado
como "raíz". Un Group es un nodo que puede
tener muchos elementos en los nodo
"secundario". Las transformaciones gráficas
(traducción, rotación y escala) y los efectos
aplicados a un grupo también se aplican a sus
hijos. Los nodos se pueden diseñar utilizando
JavaFX Cascading Style Sheets (CSS), muy
similar al CSS utilizado para formatear
documentos HTML.
La clase Scene contiene todo el contenido de
un gráfico de escena y requiere que se
establezca un nodo raíz (en la práctica, éste
suele ser un grupo). Usted puede fijar el
tamaño de una escena específicamente; De lo
contrario, el tamaño de una escena se
calculará automáticamente en función de su
contenido. Un objeto de escena se debe pasar
al escenario (por el método setScene()) para que
se muestre.
 Gráficos en 2D
El control javafx.scene.canvas.Canvas nos
proporciona una superficie de dibujo sobre la
cual podemos mostrar texto, formas
geométricas e imágenes, al crear una instancia
del objeto Canvas debemos establecer su
tamaño, usando el constructor o los
correspondientes métodos set y obtener el
javafx.scene.canvas.GraphicsContext que nos
permitirá acceder a los comandos de dibujo
requeridos.
 Conceptos básicos de JavaFx
Lo primero será explicar los tres conceptos que tiene JavaFX:

• El Escenario, que es representado por la clase Stage. El

escenario es el representa al contenedor general de JavaFX.
• La escena, es representada por la clase Scene y es la que
tiene el contenido de lo que queremos representar. La
escena, por lógica se monta sobre el escenario.
• Los nodos de la escena, son los elementos que componen
la escena. La clase superior que representa estos nodos es
un Panel, en este caso vamos a utilizar un StackPane

Vamos a montar nuestro escenario del Hola Mundo con

JavaFX, desde los nodos hasta la escena...
Método Principa
recibe como
parámetro al
escenario

Escenario

Nodos

Escena
 Introducción
Antes de comenzar a dibujar debemos agregar
el Canvas de nuestro Scene, la clase Canvas
hereda de la clase Node por lo que podemos
manipularla y agregarla al Scene como
cualquier otro control, luego debemos
obtener el GraphicsContext, lo hacemos con el
método getGraphicsContext2D()
proporcionado por la clase Canvas.
El estilo de lápiz que se aplica al
exterior de una forma. Este
atributo stroke nos permite
dibujar líneas con cualquier
tamaño de punto y patrón de
sombreado y aplicar
finalizadores y decoraciones a la
línea.
El estilo de relleno que se aplica al
interior de la forma. Este
atributo paint nos permite
rellenar formas con colores
sólidos, gradientes o patrones.

El estilo de composición se utiliza

cuando los objetos dibujados se
solapan con objetos existentes.
La transformación que se aplica
durante el dibujado para
convertir el objeto dibujado
desde el espacio de usuario a las
coordenadas de espacio del
dispositivo. También se pueden
aplicar otras transformaciones
opcionales como la traducción,
rotación escalado, recortado, a
través de este atributo.
El Clip que restringe el dibujado al
área dentro de los bordes de la
Shape se utiliza para definir el ára
de recorte. Se puede usar
cualquier Shape para definir un
clip.
La fuente se usa para convertir
cadenas de texto.
Punto de Renderizado que
especifican las preferencias en
cuanto a velocidad y calidad. Por
ejemplo, podemos especificar si
se debería usar antialiasing, si
está disponible.
Estos son los comando disponibles para dibujar figuras, para cada una de
ellas requerimos distintos parámetros de entrada.
https://docs.oracle.com/javase/8/javafx/graphics-
tutorial/canvas.htm#JFXGR214

• fillArc()
• fillOval()
• fillPolygon()
• fillRect()
• fillRoundRect()
• strokeArc()
• strokeLine()
• strokeOval()
• strokePolygon()
• strokePolyline()
• strokeRect()
• strokeRoundRect()
 Visualización
 El punto (0,0) se localiza en la esquina superior derecha
 La coordenada X se incrementa hacia la derecha, y la
coordenada Y hacia abajo.
 Aunque el sistema de coordenadas para una ventana o una
pantalla podría ser muy distinto que para una impresora,
estas diferencias son invisibles para los programas Java. Las
conversiones necesarias entre el espacio de usuario y el
espacio de dispositivo se realizan automáticamente durante el
dibujado.
 Colores
Los colores se pueden utilizar de la siguiente forma:

gc.setStroke(Color.BLUE);

gc.setFill(Color.BROWN);
 Métodos para dibujar
• Rectángulos (class to the package javafx.scene.shape.)

gc.strokeRect(160, 100, 30, 30);

gc.fillRect(160, 100, 30, 30);

 Métodos para dibujar
• Rectangulos Redondeados

// (160,100) de ancho 30, alto 30, radio de bordes con

ancho 10 y alto 10

gc.strokeRoundRect(160, 100, 30, 30, 10,10);

gc.fillRoundRect(110, 100, 30, 30, 10, 10);

 Métodos para dibujar
• Arcos
gc.strokeArc(250, 100, 30, 30, 90, 180, ArcType.CHORD);

90O

180O 0O

270O

gc.fillArc(300, 100, 30, 30, 90, 180, ArcType.CHORD);

 Métodos para dibujar
P1 P2
(X,Y) (X2,Y2)

• Línea

gc.strokeLine(0, 0, 100, 40);

 Métodos para dibujar
• Elipses
// Dibujar un círculo a partir de la posición (60,100) de
ancho 30 y alto 30
gc.strokeOval(60, 100, 30, 30);

gc.fillOval(250, 100, 30, 30);

 Dibujar Imágenes
• Para dibujar imágenes usaremos el comando drawImage() donde
debemos indicar el objeto Image que deseamos dibujar, la posición
y tamaño del mismo, este método cuenta con tres sobrecargas, la
primera dibuja la imagen en la posición (x, y), la segunda nos
permite definir el tamaño (w, h) y la tercera nos permite dibujar una
región de la imagen (sx, sy, sw, sh) en la posición y tamaño
indicados por los parámetros (dx, dy, dw, dh).

• void drawImage(Image img, double x, double y)

• void drawImage(Image img, double x, double y, double w, double h)
• void drawImage(Image img, double sx, double sy, double sw, double
sh, double dx, double dy, double dw, double dh)
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class Imagenes extends Application {

@Override
public void start(Stage primaryStage) {
// Crea la imagen y el objeto ImageView
Image image = new Image("carita2.jpg");
ImageView imageView = new ImageView();
imageView.setImage(image);

// Despliega la imagen en la pantalla

StackPane root = new StackPane();
root.getChildren().add(imageView);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Ejemplo de Imagenes");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {

launch(args);
}
}
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Linea2D extends Application {

@Override
public void start(Stage primaryStage) {
/* CREACIÓN DE LA VENTANA Y DE LOS CONTENEDORES PRINCIPALES */
// Contenedor principal donde se alojarán todos los elementos
Group root = new Group();
// Creación de una zona de dibujo (canvas) de 200 x 150 puntos
Canvas canvas = new Canvas(600, 400);
// Obtención del contexto gráfico del canvas anterior que permitirá realizar posteriormente los dibujos
GraphicsContext gc = canvas.getGraphicsContext2D();
// Se añade el canvas al contenedor principal (root)
root.getChildren().add(canvas);
// Creación del área (scene) correspondiente al contenido que tendrá la ventana, de 600 x 400 puntos, con color gris claro, indicando que el
// elemento root va a ser el contenedor principal de este espacio
Scene scene = new Scene(root, 600, 400, Color.LIGHTGRAY);
// Se asocia la ventana (scene) al parámetro primaryStage (escenario
// principal). El parámetro primaryStage se recibe en este método start
primaryStage.setScene(scene);
// Título que se aparecerá en la ventana
primaryStage.setTitle("Dibujo de Linea");
// Orden para que se muestre la ventana
primaryStage.show();
gc.setStroke(Color.BLUE);
// Cambiar a partir de este momento el grosor de las líneas a 5 puntos
gc.setLineWidth(5);
// Dibujar una línea desde la posición (0,0) a (100,40)
gc.strokeLine(0, 0, 100, 100);
}

public static void main(String[] args) {

launch(args);
}
}
 2.3.1. Bézier.

Se denomina curvas de Bézier a un sistema que

se desarrolló hacia los años 1960 para el trazado
de dibujos técnicos, en el diseño aeronáutico y
en el de automóviles. Su denominación es en
honor a Pierre Bézier, quien ideó un método de
descripción matemática de las curvas que se
comenzó a utilizar con éxito en los programas de
CAD.
 2.3.2. B-spline.
• En el subcampo matemático de análisis
numérico, una B-spline o Basis spline (o
traducido una línea polinómica suave básica),
es una función spline que tiene el mínimo
soporte con respecto a un determinado grado,
suavidad y partición del dominio.
• En el subcampo de la informática de diseño
asistido por computadora y de gráficos por
computadora, el término B-spline se refiere con
frecuencia a una curva parametrizada por otras
funciones spline, que se expresan como
combinaciones lineales de B-splines. Una B-spline
es simplemente una generalización de una curva
de Bézier, que puede evitar el fenómeno Runge
sin necesidad de aumentar el grado de la B-
spline.
El siguiente tipo de trazos disponibles son las curvas Bézier, en sus dos variantes, cúbicas y
cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.
quadraticCurveTo(cp1x, cp1y, x, y)
Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto
final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final
especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y
(cp2x, cp2y).

La diferencia entre estos puede

describirse mejor utilizando la imagen de
la derecha. Una curva cuadrática de
Bézier tiene un punto inicial y un punto
final (puntos azules) y un solo punto de
control (indicado por el punto rojo),
mientras que una curva cúbica de Bézier
utiliza dos puntos de control.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class Curvas2 extends Application {

public static void main(String[] args) {

launch(args);
}

@Override
public void start(Stage primaryStage) {

Group root = new Group();

Canvas canvas = new Canvas(600, 600);
GraphicsContext gc = canvas.getGraphicsContext2D();
root.getChildren().add(canvas);
Scene scene = new Scene(root, 600, 600, Color.LIGHTGRAY);
primaryStage.setScene(scene);
primaryStage.setTitle("Dibujo de Curvas");
primaryStage.show();
gc.setLineWidth(5.0);
gc.setStroke(Color.BLUE);
gc.quadraticCurveTo(125,25,75,25);
gc.stroke();
gc.setFill(Color.AQUAMARINE);
gc.fillText("Curva Cuadrática", 100, 300);
gc.setFill(Color.BROWN);
gc.fillText("Curva Cúbica", 100, 350);
}
}
 Dibujar SVG Paths
Es posible dibujar figuras utilizando comandos individuales o una
cadena de texto con un grupo de comandos SVG, podemos lograr
figuras complejas combinando varios paths, entre los métodos con los
que disponemos, tenemos:
• beginPath()
• lineTo(double x1, double y1)
• moveTo(double x0, double y0)
• quadraticCurveTo(double xc, double yc, double x1, double y1)
• appendSVGPath(String svgpath)
• arc(double cenX, double cenY, double radX, double radY, double
startAngle, double length)
• arcTo(double x1, double y1, double x2, double y2, double radius)
• bezierCurveTo(double xc1, double yc1, double xc2, double yc2,
double x1, double y1)
• closePath()
• stroke()
• fill()
Para empezar a dibujar primero debemos llamar
al método beginPath(), luego indicamos los
comandos necesarios para dibujar la
figura, lineTo(…), artTo(…), appenedSVGPath(…),
etc., para indicar que hemos terminado
debemos llamar al método closePath().
Para mostrar la figura
usamos fill() o stroke() como lo hemos venido
haciendo anteriormente.
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Poligonos2 extends Application {

@Override
public void start(Stage primaryStage) {
Group root = new Group();
Canvas canvas = new Canvas(600, 600);
GraphicsContext gc = canvas.getGraphicsContext2D();
root.getChildren().add(canvas);
Scene scene = new Scene(root, 600, 600, Color.LIGHTGRAY);
primaryStage.setTitle("Dibujo de Poligonos");
primaryStage.show();
gc.setLineWidth(5.0);
gc.setStroke(Color.BLUE);
gc.setFill(Color.RED);
gc.beginPath();
gc.appendSVGPath("M 226 279 L 196 388 L 82 386 L 177 449 L 139 557 L 229 486 L 320 555 L 280 448 L 373 383 L 259 388 L 226 279
z");
gc.closePath();
gc.fill();
gc.stroke();
}
public static void main(String[] args) {
launch(args);
}
}
Ejemplo de figuras
 Practica Hacer una computadora

X =0 X =500
100 200 300 400
Y=0

100

200

300

400

Y =500
Y= 500
 Texto en Java 2D
Si queremos mostrar una cadena de texto estática,
podemos dibujarla directamente a través de
Graphics2D usando el método drawString. Para
especificar la fuente, podemos usar el método
setFont de Graphics2D.
Si queremos implementar nuestras propias rutinas
de edición de texto o necesitamos más control
sobre la distribucción del texto que la que
proporcionan los componentes de texto,
podemos usar las clases del paquete
java.awt.font.
 Fuentes
Las formas que una fuente usa para representar
los caracteres de una cadena son llamadas
glyphs. Un carácter particular o una
combinación de caracteres podría ser
representada como uno o más glyphs. Por
ejemplo, á podría ser representado por dos
glyphs, mientras que la ligadura fi podría ser
representada por un sólo glyph.
 Ejercicios
• Label • Tree View
• Button • Combo Box
• Radio Button • Separator
• Toggle Button • Slider
• Checkbox • Progress Bar and Progress
• Choice Box Indicator
• Text Field • Hyperlink
• Password Field • Tooltip
• Scroll Bar • HTML Editor
• Scroll Pane • Titled Pane and Accordion
• Scroll Pane • Menu
• List View • Color Picker
• Table View • File Chooser
• Customization of UI
Controls
 Manejo de Eventos
http://acodigo.blogspot.com/2017/06/eventos-en-javafx.html

https://docs.oracle.com/javafx/2/ui_controls/overview.htm

https://docs.oracle.com/javafx/2/
 Eventos
• Un evento es una encapsulación de una
información que puede ser enviada a la
aplicación de manera asíncrona.
• Los eventos pueden corresponder a acciones
físicas (ratón y teclado) y a acciones lógicas.
 Eventos
Los eventos en la API JavaFX son parte importante en el desarrollo de una
aplicación, un evento se produce cuando el usuario interactúa con l aplicación,
por ejemplo, al hacer clic sobre un botón, al mover el mouse sobre algún Node
de la escena, al presionar una tecla, o al seleccionar un elemento de una lista,
entre muchas otras cosas.

La clase base que representa los eventos es javafx.event.Event todas las

subclases de la misma también representan eventos, algunas de estas clases
son:

• MouseEvent: Representa los eventos producidos por la interacción del

ratón, por ejemplo, hacer clic, mover el cursor, girar la rueda, etc.

• KeyEvent: Esta clase es para los eventos producidos por el teclado, puede
ser, presionar o liberar un tecla.

• WindowEvent: Aquí tenemos los eventos producidos por la ventana, por

ejemplo, el mostrar u ocultar la ventana.
 Eventos
Para controlar un evento en JavaFX disponemos de los
manejadores de eventos y los filtros de eventos, más adelante
veremos la diferencia entre ellos, cada uno de estos
controladores poseen estas propiedades:
• Target: El nodo en donde se produjo el evento, un botón, la
ventana, etc..
• Source: Indica la fuente que genera el evento, el teclado, el
ratón, etc..
• Type: Se refiera el tipo de evento producido, presionar un
botón del mouse, presionar una tecla, mover el mouse, etc.
Para responder a un evento requerimos un objeto que
implemente la interface EventHandler, seguido mostramos dos
maneras de crear este objeto, el primero usando clases
anónimas y el segundo usa expresiones lambdas, este último
requiere Java 8.
 Eventos

Para agregar estos manejadores de eventos usaremos los métodos addEventHandler() o

addEventFilter(), debemos indicar como parámetros, el tipo de evento que deseamos
manejar, y el manejador de eventos, del mismo modo removemos o quitamos un
manejador usando las funciones, removeEventFilter() o removeEventHandler().
 EVENTOS
Para entender lo que ocurre debemos saber que el proceso de generación de
un evento tiene varias fases:
Construcción de la ruta: se crea la ruta que seguirá el evento, iniciando en la
ventana (Stage) hasta el objeto en donde se origina el evento, para nuestro
caso el Button.

Fase de captura: el nodo raíz distribuye el evento, dicho evento recorre la

jerarquía iniciando en la parte superior, si alguno de los nodos de ha
registrado un filtro, el mismo es invocado, esto ocurre hasta llegar a la parte
inferior del recorrido que termina con el objeto que originó el evento.

Fase de propagación: ocurre el proceso inverso, el evento de distribuye

iniciando el recorrido en el origen del evento hasta llegar al nodo raíz, si algún
nodo ha registrado un manejador de eventos este será invocado, el proceso
termina el llegar al nodo raíz.
 EVENTOS
Debemos saber que es posible
establecer un manejador de
evento usando su método setter
respectivo, este método tiene la
siguiente forma setOnXXX()
donde XXX corresponde al tipo de
evento para el cual deseamos
agregar el controlador, por
ejemplo, para agregar un
manejador de evento para el clic
sobre un botón:
Origen de Eventos
Origen de los eventos
 TRANSFORMACIONES
JavaFX soporta varios tipos de transformaciones, como: rotación,
translación, escalado, etc., de ellas como aplicarlas, las clases
necesarias se encuentran en el paquete javafx.scene.transform y la
clase Transform es la clase base que contiene todos los métodos
necesarios para aplicar transformaciones.

Existen dos maneras para crear transformaciones, la primera utilizando

los métodos estáticos de la clase Transform, rotate() devuleve un
objeto Rotate, translate() crea un objeto Translate, etc., la otra forma
es instanciar directamente cada una de estas clases.

Para aplicar la transformación a un Node obtenemos su colección de

transformaciones usando getTransforms() luego agregamos las
transformaciones necesarias a esta colección, todas las
transformaciones que añadimos serán aplicadas.

https://docs.oracle.com/javafx/2/transformations/jfxpub-transformations.htm
 Traslación
Otra forma de aplicar transformaciones es por medio de las
correspondientes propiedades, a través de sus métodos set,
ejemplo: setTranslateX(), setTranslateY(), setRotate(), etc.
Esta transformación mueve el Node en las
coordenadas X e Y la cantidad establecida, si el
objeto se encuentra en la posición (5, 2) y la
traslación es (3, 4) la nueva posición se calcula
como: (5+3, 2+4) = (8, 6).

Usando el constructor podemos indicar las

coordenadas deseadas:

Translate()
Translate(double x, double y)
Translate(double x, double y, double z)
Usando el constructor vacío la traslación por
defecto es (0,0)
 Rotación
Esta transformación hace girar los pixeles que forman el Node en un ángulo
indicado, también es posible indicar el punto pivote para la rotación.

La clase Rotate dispone de los siguientes constructores:

Rotate()
Rotate(double angle)
Rotate(double angle, double pivotX, double pivotY)
Rotate(double angle, double pivotX, double pivotY, double pivotZ)
Rotate(double angle, double pivotX, double pivotY, double pivotZ, Point3D
axis)
Rotate(double angle, Point3D axis)
Primero indicamos el ángulo de rotación seguido de
las coordenadas del punto pivote, si lo deseamos.
 Escalación
Esta transformación afecta el tamaño de Node, e igual que la rotación
también podemos establecer un punto pivote sobre el cual aplicarla.

Constructores de la clase Scale:

Scale()
Scale(double x, double y)
Scale(double x, double y, double z)
Scale(double x, double y, double pivotX, double pivotY)
Scale(double x, double y, double z, double pivotX, double pivotY,
double pivotZ)
El valor por defecto para las coordenadas (X, Y, Z) es 1.0, para el punto
pivote es 0.0.