How to work with canvas and text in javafx

Question

I am new to JavaFX and I am trying to display a rational number. For example for the number 5/7 I want the program to show the following:

Here is the code I've tried to use in order to get the result (but it shows nothing but a blank white pane):

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

public class Main extends Application {

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

    @Override
    public void start(Stage stage) {

        Group root = new Group();

        Scene scene = new Scene(root, 200, 200);

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

    public VBox getBoxOfRationalNumber(String theNum, String theDenom) {
        VBox vb = new VBox();

        final Canvas num = new Canvas();
        final Canvas denom = new Canvas();
        final Canvas line = new Canvas();

        GraphicsContext gNum = num.getGraphicsContext2D();
        GraphicsContext gDenom = denom.getGraphicsContext2D();
        GraphicsContext gLine = line.getGraphicsContext2D();

        gLine.setFont(fontLarge);
        gNum.setFont(fontLarge);
        gDenom.setFont(fontLarge);

        gLine.fillText("______", 0, 0);
        gNum.fillText(theNum, 0, 0);
        gDenom.fillText(theDenom, 0, 0);

        vb.getChildren().add(num);
        vb.getChildren().add(line);
        vb.getChildren().add(denom);
        return vb;
    }

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

}

Answer 1

Although, you could use a canvas for this, I advise to not try to solve this problem with a canvas. In your case, using only scene graph nodes rather than canvas is most likely a more appropriate solution to your problem.

Here is a sample solution using scene graph nodes.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Line;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class FractionDisplay extends Application {
    private class Fraction extends VBox {
        private double offset;

        public Fraction(int numerator, int denominator) {
            init(numerator + "", denominator + "");
        }

        public Fraction(String numerator, String denominator) {
            init(numerator, denominator);
        }

        private void init(String numerator, String denominator) {
            setAlignment(Pos.CENTER);

            Text numeratorText   = new Text(numerator);
            Text denominatorText = new Text(denominator);

            offset = numeratorText.getBaselineOffset() * 1.5;

            double dividerWidth =
                    Math.max(
                            numeratorText.getLayoutBounds().getWidth(),
                            denominatorText.getLayoutBounds().getWidth()
                    ) + 6;

            Line divider = new Line(0, 1, dividerWidth, 1);
            divider.setStrokeWidth(2);

            getChildren().addAll(
                    numeratorText,
                    divider,
                    denominatorText
            );
        }

        public double getBaselineOffset() {
            return offset;
        }
    }

    @Override
    public void start(Stage stage) {
        TextFlow flow = new TextFlow(
                new Text("In mathematics, the infinite series "),
                new Fraction(1, 2),
                new Text(" - "),
                new Fraction(1, 4),
                new Text(" + "),
                new Fraction(1, 8),
                new Text(" - "),
                new Fraction(1, 16),
                new Text(" . . . "),
                new Text(" is a simple example of an alternating series that converges absolutely.")
        );
        flow.setPadding(new Insets(5));
        Scene scene = new Scene(flow, 300, 100);
        stage.setScene(scene);
        stage.show();
    }

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

Of course, the above is a pretty simplistic and incomplete solution to a general issue of typesetting math. If you need sophisticated mathematics typesetting, you could use something like MathJax in a WebView.

Answer 2

The main problem of your code seems to be that the canvases don't have a size. But the whole code seems to be a strange mixture of concepts for me. Why do you use three separate canvases? Why do you combine them with a VBox? Would you do all that too if you were just writing on a piece of paper?