JavaFX Tip 1: Resizable Canvas

While working on FlexGanttFX I had to deal a lot with the JavaFX Canvas node. I am using it to render activities on a timeline. Each row in the Gantt chart is a Canvas node. The user has the option to resize each row individually. So I had to figure out the best way to resize a canvas, which out-of-the-box is not resizable. The listing below shows how this can be accomplished.

The main steps needed are:

• Create a subclass of Canvas.
• Override the isResizable() method and return true.
• Override the prefWidth() and prefHeight() methods. Return the values of Canvas.getWidth() and Canvas.getHeight().
• Add listeners to the width and height properties of Canvas in order to trigger a redraw when the size of the canvas changes.
• Bind the width and height properties of Canvas to the width and height properties of the parent pane.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
/**
 * Tip 1: A canvas resizing itself to the size of
*        the parent pane.
 */
public class Tip1ResizableCanvas extends Application {
class ResizableCanvas extends Canvas {
public ResizableCanvas() {
// Redraw canvas when size changes.
widthProperty().addListener(evt -> draw());
heightProperty().addListener(evt -> draw());
}
private void draw() {
double width = getWidth();
double height = getHeight();
GraphicsContext gc = getGraphicsContext2D();
gc.clearRect(0, 0, width, height);
gc.setStroke(Color.RED);
gc.strokeLine(0, 0, width, height);
gc.strokeLine(0, height, width, 0);
}
@Override
public boolean isResizable() {
return true;
}
@Override
public double prefWidth(double height) {
return getWidth();
}
@Override
public double prefHeight(double width) {
return getHeight();
}
}
@Override
public void start(Stage stage) throws Exception {
ResizableCanvas canvas = new ResizableCanvas();
StackPane stackPane = new StackPane();
stackPane.getChildren().add(canvas);
// Bind canvas size to stack pane size.
canvas.widthProperty().bind(
stackPane.widthProperty());
canvas.heightProperty().bind(
stackPane.heightProperty());
stage.setScene(new Scene(stackPane));
stage.setTitle("Tip 1: Resizable Canvas");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

When run you should see the following: