如何在 javafx 中使用 canvas 和文本

Question

我是 JavaFX 的新手，我正在尝试显示有理数。例如，对于数字 5/7，我希望程序显示以下内容：

这是我尝试使用的代码以获得结果（但它只显示一个空白的白色窗格）：

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

您的代码的主要问题似乎是画布没有尺寸。但是整个代码对我来说似乎是一个奇怪的概念混合体。你为什么使用三个独立的画布？为什么将它们与 VBox 结合使用？如果你只是在一张纸上写字，你也会这样做吗？

Answer 2

尽管您可以为此使用 canvas，但我建议不要尝试使用 canvas 来解决此问题。在您的情况下，仅使用场景图节点而不是 canvas 最有可能更适合您的问题。

这是一个使用场景图节点的示例解决方案。

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);
    }
}

当然，以上是对排版数学的一般问题的非常简单和不完整的解决方案。如果你需要复杂的数学排版，你可以使用像 MathJax in a WebView.

这样的东西

如何在 javafx 中使用 canvas 和文本

How to work with canvas and text in javafx

java

user-interface

javafx

javafx-2

javafx-8