JavaFX 折线图点操作

Question

我正在尝试设置一个折线图，以便当单击并拖动它的值时，它的值和位置会随着图表的相应调整而发生变化。我目前创建了 4 个固定点的图表： 

这两个中间点稍后将添加到 R=x 轴和 S = y 轴的文本框中。是否可以拖动和移动中间点以便实时更新图形？创建图的代码如下：

private void setContrastChart() {

                NumberAxis xAxis = new NumberAxis();

                NumberAxis yAxis = new NumberAxis();

                LineChart<Number,Number> contrastChart =

                        new LineChart<>(xAxis,yAxis);

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

                series.setName("ContrastValues");

                //populating the series with data

                series.getData().add(new XYChart.Data(0, 0));

                series.getData().add(new XYChart.Data(75, 75));

                series.getData().add(new XYChart.Data(150, 150));

                series.getData().add(new XYChart.Data(255, 255));

                contrastChart.setMaxWidth(255);

                contrastChart.setMaxHeight(255);

                contrastChart.setLegendVisible(true);

                chartHolder.getChildren().add(contrastChart);

                contrastChart.getData().add(series);

                txtR1.setText("75");

                txtS1.setText("75");

                txtR2.setText("150");

                txtS2.setText("150");

        }

Answer 1

快速而肮脏，但我相信这可以满足您的要求。需要注意的是，该点在运动时往往会明显抖动，并且不能很好地调整大小。我怀疑这些问题可以通过更多的故障排除来解决，但希望这能让你开始。public class Main extends Application {private Stage window;private double chartMaxX;private double chartMinX;private double chartMaxY;private double chartMinY;@Overridepublic void start(Stage primaryStage) {&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; window = primaryStage;&nbsp; &nbsp; &nbsp; &nbsp; NumberAxis xAxis = new NumberAxis();&nbsp; &nbsp; &nbsp; &nbsp; NumberAxis yAxis = new NumberAxis();&nbsp; &nbsp; &nbsp; &nbsp; xAxis.setAutoRanging(false); //prevent automatic resizing for simplicity&nbsp; &nbsp; &nbsp; &nbsp; yAxis.setAutoRanging(false); //prevent automatic resizing for simplicity&nbsp; &nbsp; &nbsp; &nbsp; chartMaxX = 250.0;&nbsp; &nbsp; &nbsp; &nbsp; chartMinX = 0.0;&nbsp; &nbsp; &nbsp; &nbsp; chartMaxY = 300.0;&nbsp; &nbsp; &nbsp; &nbsp; chartMinY = 0.0;&nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* ranges of Axis are preset for simplicity, but could be altered without much trouble&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; &nbsp; &nbsp; xAxis.setUpperBound(chartMaxX);&nbsp; &nbsp; &nbsp; &nbsp; xAxis.setLowerBound(chartMinX);&nbsp; &nbsp; &nbsp; &nbsp; yAxis.setUpperBound(chartMaxY);&nbsp; &nbsp; &nbsp; &nbsp; yAxis.setLowerBound(chartMinY);&nbsp; &nbsp; &nbsp; &nbsp; LineChart<Number,Number> contrastChart = new LineChart<>(xAxis,yAxis);&nbsp; &nbsp; &nbsp; &nbsp; XYChart.Series<Number, Number> series = new XYChart.Series<>();&nbsp; &nbsp; &nbsp; &nbsp; series.setName("ContrastValues");&nbsp; &nbsp; &nbsp; &nbsp; //populating the series with data&nbsp; &nbsp; &nbsp; &nbsp; Data<Number, Number> d0 = new Data<Number, Number>(10, 10);&nbsp; &nbsp; &nbsp; &nbsp; Data<Number, Number> d1 = new Data<Number, Number>(75, 75);&nbsp; &nbsp; &nbsp; &nbsp; Data<Number, Number> d2 = new Data<Number, Number>(150, 150);&nbsp; &nbsp; &nbsp; &nbsp; Data<Number, Number> d3 = new Data<Number, Number>(240, 240);&nbsp; &nbsp; &nbsp; &nbsp; series.getData().add(d0);&nbsp; &nbsp; &nbsp; &nbsp; series.getData().add(d1);&nbsp; &nbsp; &nbsp; &nbsp; series.getData().add(d2);&nbsp; &nbsp; &nbsp; &nbsp; series.getData().add(d3);&nbsp; &nbsp; &nbsp; &nbsp; contrastChart.setLegendVisible(true);&nbsp; &nbsp; &nbsp; &nbsp; contrastChart.getData().add(series);&nbsp; &nbsp; &nbsp; &nbsp; contrastChart.setAnimated(false); //prevent animations, as they will pull the point out of sync with the cursor.&nbsp; &nbsp; &nbsp; &nbsp; for(Data<Number, Number> point: series.getData()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point.getNode().setOnMouseDragged(event -> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Point2D translateXY = point.getNode().screenToLocal(event.getScreenX(), event.getScreenY());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point.setXValue(translateXY.getX()+point.getXValue().doubleValue());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point.setYValue(reverseNumberInRange(translateXY.getY()+(chartMaxY-point.getYValue().doubleValue()), chartMinY, chartMaxY));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //SCENE&nbsp; &nbsp; &nbsp; &nbsp; Scene myScene = new Scene(contrastChart, chartMaxY, chartMaxX);&nbsp; &nbsp; &nbsp; &nbsp; window.setScene(myScene);&nbsp; &nbsp; &nbsp; &nbsp; window.show();&nbsp; &nbsp; } catch(Exception e) {&nbsp; &nbsp; &nbsp; &nbsp; e.printStackTrace();&nbsp; &nbsp; }}public static void main(String[] args) {&nbsp; &nbsp; launch(args);}public double reverseNumberInRange(double value, double minVal, double maxVal) {&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp;* y0 is top left on screen, and bottom left in chart, need to reverse.&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; return (maxVal + minVal) - value;}}