JavaFX Pane z-阶

Question

我正在为JavaFX启动一个小的高性能图表库，因为所提供的图表库仍然是错误的，并且不是为了显示大量的点数(20k+)。

我的自定义图表类扩展了StackPane，但这不允许我显式地将元素定位为解释的这里，而我遇到了这个问题。所以现在我转到了Pane，但是Pane似乎不允许z顺序，尽管很多人说z顺序是根据子列表中的Node位置实现的。

这就是我在扩展StackPane时得到的

​

​

这就是我使用Pane的时候：

​

​

正如你所看到的，线不再显示。下面是我如何添加我的节点：

 private Pane chartBackground = new Pane();
    private Pane chartPlotPane = new Pane();
    private XYAxis xAxis = new XYAxis();
    private XYAxis yAxis = new XYAxis();

getChildren().addAll(chartBackground, xAxis, yAxis);

在这里，XYAxis只是黑线。这是完整的代码，如果您需要的话：

public class XYChart<X extends Number,Y extends Number> extends Pane{

    private ArrayList<XYSeries<X,Y>> seriesList = new ArrayList<>();

    // Components
    private Pane chartBackground = new Pane();
    private Pane chartPlotPane = new Pane();
    private XYAxis xAxis = new XYAxis();
    private XYAxis yAxis = new XYAxis();

    // Properties
    private Color BG_COLOR = Color.valueOf("EDEDED");
    private Color PLOT_PANE_COLOR = Color.RED;
    private double yPadding = 20, xPadding = 20;

    public XYChart(){
        getChildren().addAll(chartBackground, xAxis, yAxis);

        chartBackground.setStyle("-fx-background-color:" + BG_COLOR.toString().substring(2) + ";");
        chartPlotPane.setStyle("-fx-background-color:" + PLOT_PANE_COLOR.toString().substring(2) + ";");
        chartPlotPane.setMouseTransparent(true);

        setOnMouseDragged(event -> {
            chartPlotPane.setLayoutX(event.getSceneX());
            chartPlotPane.setLayoutY(event.getSceneY());

            System.out.println("Drag x: " + event.getX());
        });

        redraw();
    }

    public void addSeries(XYSeries<X,Y> series){
        seriesList.add(series);
    }

    public void removeSeries(int index){
        seriesList.remove(index);
    }

    private void drawAxes(){
        xAxis.setAxisWidth(getPrefWidth() - 2*xPadding);
        xAxis.setAxisHeight(10);

        yAxis.setAxisWidth(10);
        yAxis.setAxisHeight(getPrefHeight() - 2*yPadding);

        // Set X axis position
        xAxis.setAxisX(getLayoutX() + yAxis.getAxisWidth() + xPadding);
        xAxis.setAxisY(getLayoutY() + yAxis.getAxisHeight() + yPadding);

        // Set Y axis position
        yAxis.setAxisY(xAxis.getAxisY());
        yAxis.setAxisX(xAxis.getAxisX());

        xAxis.redraw();
        yAxis.redraw();
    }

    public void redraw(){
        drawAxes();

        // Chart background
        chartBackground.setPrefWidth(getPrefWidth());
        chartBackground.setPrefHeight(getPrefHeight());
        chartBackground.setLayoutX(getLayoutX());
        chartBackground.setLayoutY(getLayoutY());

        /*
        // Chart plotting pane
        chartPlotPane.setLayoutX(xAxis.getAxisX());
        chartPlotPane.setLayoutY(yAxis.getAxisY() - yAxis.getAxisHeight());

        chartPlotPane.setPrefWidth(xAxis.getAxisWidth());
        chartPlotPane.setMaxWidth(xAxis.getAxisWidth());*/

        chartPlotPane.setPrefHeight(yAxis.getAxisHeight());
        chartPlotPane.setMaxHeight(yAxis.getAxisHeight());
    }

}

编辑

下面是一个简单的代码片段，试图完成我解释的内容：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class PaneTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        Pane bgPane = new Pane();
        Pane pane1 = new Pane();
        Pane pane2 = new Pane();

        bgPane.setStyle("-fx-background-color: white;");
        pane1.setStyle("-fx-background-color: red;");
        pane2.setStyle("-fx-background-color: blue;");

        pane1.setLayoutX(0);
        pane1.setLayoutY(0);
        pane2.setLayoutX(100);
        pane2.setLayoutY(100);

        bgPane.getChildren().addAll(pane1, pane2);

        Scene scene = new Scene(bgPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Answer 1

为什么你的窗格测试没有显示任何窗格

窗格会自动调整大小以适应其内容。如果它没有内容和最小大小，那么它根本就没有大小，所以您不会看到它。如果为窗格设置了最小大小，则可以看到它们，例如：

pane1.setMinSize(200, 200);
pane2.setMinSize(300, 300);

我没有尝试调试自定义XYChart中的代码，以确定为什么您的行没有出现在那里，我猜问题可能与z顺序逻辑无关，但可能与其他代码问题有关。

一些建议

你要完成绘图包还有很长的路要走。如果内置的JavaFX图表包不符合您的要求，我建议评估第三方库，如JFreeChart或OrsonCharts，它可以通过FXGraphics2D桥在JavaFX中使用。