JavaFX Canvas

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.

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.

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Canvas canvas = new Canvas(800, 600);
        Group root = new Group(canvas);

        GraphicsContext gc = canvas.getGraphicsContext2D();
        gc.fillText("Hello JavaFX Canvas", 20, 40);

        primaryStage.setTitle("JavaFX Canvas");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Llamaremos a nuestro GraphicContext, gc, en este ejemplo usamos el comando fillText(t, x, y)  para dibujar el texto “Hello JavaFX Canvas” en la posición (20, 40).

Dibujar Figuras Básicas

La clase GraphicsContext proporciona comandos de dibujo para figuras básicas como: líneas, rectángulos, elipses y otros, a través de dos métodos, los comandos fillXxx y strokeXxx donde Xxx corresponde al nombre de la figura a dibujar, fillXxx dibujará la figura con su interior relleno con el color especificado y strokeXxx solo dibujara el contorno de la figura.

private void drawInCanvas(GraphicsContext gc) {
    gc.fillRect(20, 20, 100, 100);
    gc.strokeRect(140, 20, 100, 100);
}

Diferencias entre el comando fillRect(x, y, ancho, alto) y strokeRect(x, y, ancho, alto), debemos indicar la posición x, y además de las dimensiones ancho y alto, para establecer el color usado para dibujar la figura usaremos setFill(Color.RED) para los comandos fill y setStroke(Color.BLUE) para los comandos stroke.

• fillArc()
• fillOval()
• fillPolygon()
• fillRect()
• fillRoundRect()
• strokeArc()
• strokeLine()
• strokeOval()
• strokePolygon()
• strokePolyline()
• strokeRect()
• strokeRoundRect()

Estos son los comando disponibles para dibujar figuras, para cada una de ellas requerimos distintos parámetros de entrada.

Dibujar Texto

También podemos dibujar texto, ya seo solo el borde o con un color de relleno, contamos con los siguientes métodos:

• void strokeText(String text, double x, double y)
• void strokeText(String text, double x, double y, double maxWidth)
• void fillText(String text, double x, double y)
• void fillText(String text, double x, double y, double maxWidth)

Ambos métodos “fill y stroke” poseen una versión sobrecargada, la cual permite indicar, además del texto a dibujar y la posición (x, y), el ancho máximo del texto, si se sobrepasa este valor el texto será escalado.

gc.setStroke(Color.BLACK);
gc.strokeText("Drawing Text", 10, 10);
gc.strokeText("Drawing Text", 100, 10, 40);

El primer texto fue dibujado con el comando stroke y el segundo con fill, usamos el método setFont para cambiar la fuente usada para dibujar el texto, podemos establecer el tamaño y estilo de la fuente con este código:

gc.setFont(Font.font("Verdana", FontWeight.LIGHT, FontPosture.ITALIC, 32.0));
gc.setStroke(Color.BLUEVIOLET);
gc.strokeText("Stroke Text - Canvas JavaFX", 20, 160);
gc.setFill(Color.DARKGREEN);
gc.fillText("Fill Text - Canvas JavaFX", 20, 210);

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)

Image image = new Image(getClass().getResourceAsStream("image.png"));
gc.drawImage(image, 20, 260);
gc.drawImage(image, 20, 260, 256, 256);
gc.drawImage(image, 50, 80, 200, 200, 20, 260, 256, 256);

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.

private void drawSVGPath(GraphicsContext gc) {
    gc.setStroke(Color.BLUE);
    gc.setLineWidth(5.0);

    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.stroke();
}

Estrella dibujada usando un string svg, la izquierda es creada con el comando Stroke y la derecha usando el comando Fill.