如何在JavaFX上调整画布的大小以适合其大小

Question

I am new to JavaFX and I encountered a problem resizing a canvas. I am trying to get the canvas size to fit exactly the contents I place into it. The output should be the only the fragment 5/7, but I get a lot of white space right next to the numbers I drew. I tried resizing the canvas using setWidth and even setting the canvas on small size from the begining but nothing seems to help.

Here is my code:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.HBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

public class Example extends Application {

    Font fontLarge = Font.font("Droid Sans", FontWeight.BOLD, 15);

    @Override
    public void start(Stage stage) {

        HBox root = new HBox();
        Scene scene = new Scene(root);

        root.getChildren().add(getCanvasOfRationalNumber("5", "7"));
        scene.setRoot(root);
        stage.setScene(scene);
        stage.show();
    }

    public Canvas getCanvasOfRationalNumber(String num, String denom) {
        final Canvas rnCanvas = new Canvas(300, 55);
        GraphicsContext gc = rnCanvas.getGraphicsContext2D();
        gc.setFont(fontLarge);

        gc.fillText(num, 0, 15);
        gc.fillText("___", 0, 20);
        gc.fillText(denom, 0, 40);

        rnCanvas.setWidth(15);
        return rnCanvas;
    }

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

}

Answer 1

Edit: My previous answer was wrong, here's the new one.

We need to clarify on what you really want. If I understand correctly now what you want is that the window size itself isn't larger than the Canvas size.

As jewelsea pointed out in the comments you can change the Canvas width and height. In fact you are doing it already in your code.

I suggest you choose different colors for the Canvas and the Scene. If you do that with eg:

public class Example extends Application {

    Font fontLarge = Font.font("Droid Sans", FontWeight.BOLD, 15);

    @Override
    public void start(Stage stage) {

        HBox root = new HBox();
        Scene scene = new Scene(root, Color.YELLOW);

        root.getChildren().add(getCanvasOfRationalNumber("5", "7"));
        scene.setRoot(root);
        stage.setScene(scene);
        stage.show();
    }

    public Canvas getCanvasOfRationalNumber(String num, String denom) {
        final Canvas rnCanvas = new Canvas(300, 55);
        GraphicsContext gc = rnCanvas.getGraphicsContext2D();
        gc.setFont(fontLarge);

        gc.setFill(Color.LIGHTBLUE);
        gc.fillRect(0, 0, 300, 55);

        gc.setFill(Color.BLUE);

        gc.fillText(num, 0, 15);
        gc.fillText("___", 0, 20);
        gc.fillText(denom, 0, 40);

        rnCanvas.setWidth(15);
        return rnCanvas;
    }

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

}

you'll get this

You clearly see that the Canvas has been resized. The problem you are facing is that the window can't be smaller. That's the white (or here yellow) space from the Scene, not from the Canvas. You could try setting the width to 1 and height to 1, but you'll still end up with this:

My guess is that the window size can't become smaller because of the min/max/close buttons. You could change the style using the initStyle method to get rid of the buttons.

It all comes down to what your requirements are.

---

Old (wrong) answer:

You can't modify the width/height of the Canvas .

Canvas is an image that can be drawn on using a set of graphics commands provided by a GraphicsContext.

A Canvas node is constructed with a width and height that specifies the size of the image into which the canvas drawing commands are rendered. All drawing operations are clipped to the bounds of that image.

Your solution would be either to copy the canvas area to a new canvas with another size or don't use a canvas at all, instead use eg a Text node. But that all depends on your requirements.