[SOLVED] Javafx: How to set a scaled image as a node background

Javafx: How to set a scaled image as a node background

I have a simple JavaFX program that uses an image for the background on the main Pane. Currently I'm loading the image directly in my .css file:

.pane {
  -fx-background-image: url('map.png');
  -fx-background-size: 1000 800;
}

This works fine, but the quality of the image -fx-background-size generates is rather poor.

Instead I'd like to use java.awt.Image#getScaledInstance with Image.SCALE_SMOOTH (or the JavaFX equivalent), which generates an image of much higher quality.

Can I use getScaledInstance directly and somehow pass a Java awt image to my css file? Or inline it with setStyle?

I'm aware that since this image is only being resized once I could just resize the original image and import that, but I'd like to know if what I want to do is possible.

Solution

All I needed to do was remove my CSS and simply do:

Pane root = new Pane();
ImageView background = new ImageView(new Image("map.png", 1000, 800, false, true));
root.getChildren().add(background);

This is because the JavaFX equivalent of java.awt.Image#getScaledInstance is just in the constructor for javafx.scene.image.Image.

While you can't use a java.awt.Image in place of a javafx.scene.image.Image, using this javafx.scene.image.Image constructor:

Image(String url, double width, double height, boolean preserveRatio, boolean smooth)

and passing true as the value for the smooth field will give a similar quality image as getScaledInstance using Image.SCALE_SMOOTH. Then (as @kylejmcintyre mentioned) you can pass the javafx.scene.image.Image to an ImageView object and add it to your root Pane.