JavaFX 2.x：如何将 Line、Grid 和 X Ticks 一起移动？答案

【问题标题】：JavaFX 2.x : How to move Line, Grid and X Ticks together?JavaFX 2.x：如何将 Line、Grid 和 X Ticks 一起移动？
【发布时间】：2012-10-18 15:32:33
【问题描述】：

下面的代码绘制了一个XYLineChart：通过鼠标左键单击并拖动绘制的线可以向左/向右平移。

import javafx.application.Application; 
import javafx.beans.property.SimpleDoubleProperty; 
import javafx.event.EventHandler;  
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.stage.Stage; 
import javafx.scene.Scene; 
import javafx.scene.chart.LineChart; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.layout.BorderPane;
enter code here


public class GridMove extends Application {

    BorderPane pane;
    XYChart.Series series1 = new XYChart.Series();
    SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectY = new SimpleDoubleProperty();

    @Override
    public void start(Stage stage) {

        final NumberAxis xAxis = new NumberAxis(1, 12, 1);
        final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);

        xAxis.setAnimated(false);
        yAxis.setAnimated(false);

        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
            @Override
            public String toString(Number object) {
                return String.format("%7.5f", object);
            }
        });

        final LineChart<Number, Number> lineChart = new LineChart<Number, Number>(xAxis, yAxis);

        lineChart.setCreateSymbols(false);
        lineChart.setAlternativeRowFillVisible(false);
        lineChart.setAnimated(false);
        lineChart.setLegendVisible(false);

        series1.getData().add(new XYChart.Data(1, 0.53185));
        series1.getData().add(new XYChart.Data(2, 0.532235));
        series1.getData().add(new XYChart.Data(3, 0.53234));
        series1.getData().add(new XYChart.Data(4, 0.538765));
        series1.getData().add(new XYChart.Data(5, 0.53442));
        series1.getData().add(new XYChart.Data(6, 0.534658));
        series1.getData().add(new XYChart.Data(7, 0.53023));
        series1.getData().add(new XYChart.Data(8, 0.53001));
        series1.getData().add(new XYChart.Data(9, 0.53589));
        series1.getData().add(new XYChart.Data(10, 0.53476));

        pane = new BorderPane();
        pane.setCenter(lineChart);
        Scene scene = new Scene(pane, 800, 600);
        lineChart.getData().addAll(series1);

        stage.setScene(scene);

        scene.setOnMouseClicked(mouseHandler);
        scene.setOnMouseDragged(mouseHandler);
        scene.setOnMouseEntered(mouseHandler);
        scene.setOnMouseExited(mouseHandler);
        scene.setOnMouseMoved(mouseHandler);
        scene.setOnMousePressed(mouseHandler);
        scene.setOnMouseReleased(mouseHandler);
        stage.show();
    }
    EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {

            if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
                rectinitX.set(mouseEvent.getX());
            } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED || mouseEvent.getEventType() == MouseEvent.MOUSE_MOVED) {
                LineChart<Number, Number> lineChart = (LineChart<Number, Number>) pane.getCenter();
                NumberAxis xAxis = (NumberAxis) lineChart.getXAxis();

                double Tgap = xAxis.getWidth() / (xAxis.getUpperBound() - xAxis.getLowerBound());
                double newXlower = xAxis.getLowerBound(), newXupper = xAxis.getUpperBound();
                double Delta = 0.3;

                if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
                    if (rectinitX.get() < mouseEvent.getX()) {
                        newXlower = xAxis.getLowerBound() - Delta;
                        newXupper = xAxis.getUpperBound() - Delta;
                    } else if (rectinitX.get() > mouseEvent.getX()) {
                        newXlower = xAxis.getLowerBound() + Delta;
                        newXupper = xAxis.getUpperBound() + Delta;
                    }
                    xAxis.setLowerBound(newXlower);
                    xAxis.setUpperBound(newXupper);
                }
                rectinitX.set(mouseEvent.getX());
            }
        }
    };

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

我的问题是

1) 现在通过左右移动 Line，Grid 和 X Ticks 不会移动：那么，如何将 Line、Grid 和 X Ticks 一起翻译？

2) 是否有可能在 JavaFx 2 中实现这一点？

谢谢

编辑没人愿意帮忙吗？

编辑 2： 添加了导入语句

编辑 3： 代码改进，现在网格和线条一起移动。只剩下沿线和网格移动X轴刻度，垂直网格线缺少超出线范围值

import java.util.Set;
import javafx.application.Application; 
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty; 
import javafx.collections.ObservableList;
import javafx.event.EventHandler;  
import javafx.scene.chart.Axis;
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage; 
import javafx.scene.Node;
import javafx.scene.Scene; 
import javafx.scene.chart.LineChart; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;

public class GridMove extends Application {

BorderPane pane;

XYChart.Series series1 = new XYChart.Series();

SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
SimpleDoubleProperty rectX = new SimpleDoubleProperty();
SimpleDoubleProperty rectY = new SimpleDoubleProperty();
LineChart<Number, Number> lineChart;

@Override
public void start(Stage stage) {

    final NumberAxis xAxis = new NumberAxis(1, 12, 1);
    final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);

    xAxis.setAnimated(false);
    yAxis.setAnimated(false);

    yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
        @Override
        public String toString(Number object) {
            return String.format("%7.5f", object);
        }
    });

    lineChart = new LineChart<Number, Number>(xAxis, yAxis);

    lineChart.setCreateSymbols(false);
    lineChart.setAlternativeRowFillVisible(false);
    lineChart.setAnimated(false);
    lineChart.setLegendVisible(false);

    series1.getData().add(new XYChart.Data(1, 0.53185));
    series1.getData().add(new XYChart.Data(2, 0.532235));
    series1.getData().add(new XYChart.Data(3, 0.53234));
    series1.getData().add(new XYChart.Data(4, 0.538765));
    series1.getData().add(new XYChart.Data(5, 0.53442));
    series1.getData().add(new XYChart.Data(6, 0.534658));
    series1.getData().add(new XYChart.Data(7, 0.53023));
    series1.getData().add(new XYChart.Data(8, 0.53001));
    series1.getData().add(new XYChart.Data(9, 0.53589));
    series1.getData().add(new XYChart.Data(10, 0.53476));

    pane = new BorderPane();
    pane.setCenter(lineChart);
    Scene scene = new Scene(pane, 800, 600);
    lineChart.getData().addAll(series1);            

    stage.setScene(scene);

    scene.setOnMouseClicked(mouseHandler);
    scene.setOnMouseDragged(mouseHandler);
    scene.setOnMouseEntered(mouseHandler);
    scene.setOnMouseExited(mouseHandler);
    scene.setOnMouseMoved(mouseHandler);
    scene.setOnMousePressed(mouseHandler);
    scene.setOnMouseReleased(mouseHandler);
    stage.show();      
}
EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent mouseEvent) {

          if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
            rectinitX.set(mouseEvent.getX());
        } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED || mouseEvent.getEventType() == MouseEvent.MOUSE_MOVED) {
            LineChart<Number, Number> lineChart = (LineChart<Number, Number>) pane.getCenter();
            NumberAxis xAxis = (NumberAxis) lineChart.getXAxis();

            double newXlower = xAxis.getLowerBound(), newXupper = xAxis.getUpperBound();
            double Delta = 0.3;

            if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
                if (rectinitX.get() < mouseEvent.getX()) {
                    Delta *= -1;                    
                } 
                newXlower = xAxis.getLowerBound() + Delta;
                newXupper = xAxis.getUpperBound() + Delta;

                xAxis.setLowerBound(newXlower);
                xAxis.setUpperBound(newXupper);

                DoubleProperty p1 = xAxis.scaleXProperty();
                DoubleProperty p2 = xAxis.translateXProperty();

                double horizontalValueRange = xAxis.getUpperBound() - xAxis.getLowerBound();
                double horizontalWidthPixels = xAxis.getWidth();
                //pixels per unit
                double xScale = horizontalWidthPixels / horizontalValueRange;

                Set<Node> nodes = lineChart.lookupAll(".chart-vertical-grid-lines");
                for (Node n: nodes) {
                    Path p = (Path) n;
                    double currLayoutX = p.getLayoutX();
                    p.setLayoutX(currLayoutX + (Delta*-1) * xScale);
                }                    
                double lox = xAxis.getLayoutX();                                      
            }
            rectinitX.set(mouseEvent.getX());
        }
    }
};
public static void main(String[] args) {
    launch(args);
}
}

非常感谢任何帮助！

【问题讨论】：

您具体要完成什么？当我编译这个（顺便说一下，下次请包括导入，Eclipse/Netbeans 很聪明，但不是那么聪明）并运行它时，我看到图表随着刻度线移动 staying 与绘制点。这是有道理的。您是要翻译图形（更改所有点值）还是要移动图形。你肯定是按原样移动它。
嗨丹尼尔：这段代码改变了刻度值，而网格和刻度线静止不动。更重要的是，由于 X 轴的 int 值范围为 1 到 10，因此在折线图左右移动时我不应该有小数
几件事：当我运行它时，滴答声保持静止，但改变数字以反映您正在查看的内容（正确的行为）。第二，如果您关心刻度的值，您需要通过一个整数值来设置它。现在您正在使用将其设置为双精度的鼠标事件（双精度）。您需要进行一些计算以通过 (1) 组“捕捉”它，但这应该不会太难。如果您有兴趣滚动带有刻度的图表，您需要更深入地查看，这似乎不是“现成”的解决方案。
嗨丹尼尔感谢您的建议：是的，您直截了当，我的兴趣是在 LineChart 向左/向右移动时滚动（图表 && 刻度 && 网格），这似乎很棘手：希望获得一些帮助来解决这个问题。
@Adam 是的，我确实使用这个 jfxutils github.com/gillius/jfxutils 解决了问题

标签： grid javafx-2 linechart

【解决方案1】：

这是一个评论，但不知何故我太新了，无法评论。

我会通过将图表嵌入到带有不可见滚动条的 ScrollPane 中来解决此问题，并将图表的 y 轴不透明度也设置为 0。如果无法将所有图表数据加载到内存中，则必须管理滚动事件中的数据获取等。

此外，您可以为 y 轴使用独立的 NumberAxis。您必须手动进行适当的缩放和定位。

【讨论】：