Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX - Resize Canvas when screen is resized

I'm working on the GUI of my level editor that I built in JavaFX, and I want to be able to resize the canvas object to the new split pane dimensions. It seems that everything I've tried has failed. This includes passing the pane object in and using its width directly, using window size listeners and binding the width and height property to that of the split pane. Any ideas? This is what it looks like before a resize:

enter image description here

And after a resize:

enter image description here

Does anybody have any ideas? The code for the class is pretty extensive, but the code for the resizing will be included here:

public Canvas canvas;
public String tabTitle;
public VBox layout;
public GraphicsContext g;
public Core core;

public CanvasTab(Core core, String tabTitle){
    this.core = core;
    this.canvas = new Canvas(core.scene.getWidth() - 70, core.scene.getHeight() - 70);
    layout = VBoxBuilder.create().spacing(0).padding(new Insets(10, 10, 10, 10)).children(canvas).build();
    
    this.g = canvas.getGraphicsContext2D();

    g.setFill(Color.BLACK);
    g.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
    
    HBox.setHgrow(layout, Priority.ALWAYS);
    
    this.setContent(layout);
    this.setText(tabTitle);
    
    canvas.widthProperty().bind(layout.widthProperty().subtract(20));
    canvas.heightProperty().bind(layout.heightProperty().subtract(20));
}

public CanvasTab(Canvas canvas){
    this.canvas = canvas;
}
like image 542
Mark Nutt Avatar asked May 03 '14 21:05

Mark Nutt


People also ask

How do you resize a canvas?

With the Select and Move Tool, click the canvas size label or border to select the canvas. Click the canvas border handles to resize the canvas dynamically. When you drag the border handles without using any keyboard modifiers, the canvas resizes non-uniformly. Hold Shift to constrain the resize proportions.

Why do you need to modify the size of the canvas?

If you need more space to add elements to an image, you can increase the canvas size, or you can resize the canvas to make it smaller. If you want to resize by adjusting the image size, see Resizing images.

What is JavaFX canvas?

Canvas class is a part of JavaFX. Canvas class basically creates an image that can be drawn on using a set of graphics commands provided by a GraphicsContext. Canvas has a specified height and width and all the drawing operations are clipped to the bounds of the canvas.


1 Answers

As James_D pointed out, you need to redraw the content of your canvas when resizing. This can be done by adding a listener to your canvas' width and height property as follows:

InvalidationListener listener = new InvalidationListener(){
    @Override
    public void invalidated(Observable o) {
        redraw();       
    }           
});
canvas.widthProperty().addListener(listener);
canvas.heightProperty().addListener(listener);

or in Java 8 using functional interfaces:

canvas.widthProperty().addListener(observable -> redraw());
canvas.heightProperty().addListener(observable -> redraw());

where redraw() is your own method which would look like this for your example (drawing a black rectangle:

private void redraw() {
    g.setFill(Color.BLACK);
    g.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
}
like image 134
schauk11erd Avatar answered Oct 09 '22 00:10

schauk11erd