如何在javafx中使用canvas和text [英] How to work with canvas and text in javafx

问题描述

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

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

}

推荐答案

虽然你可以使用画布，但我建议不要尝试用画布来解决这个问题。在您的情况下，仅使用场景图节点而非画布很可能是解决您问题的更合适的方法。

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

当然，以上是相当简单和不完整的解决排版数学的一般问题。如果您需要复杂的数学排版，您可以在 MathJax 之类的内容。 docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebView.htmlrel =nofollow noreferrer> WebView 。

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.

这篇关于如何在javafx中使用canvas和text的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！