Javafx 2图表调整与徒手绘制 [英] Javafx 2 chart resize with freehand draw

问题描述

我有一个代码在JavaFX 2.0中在XYChart上自由绘制
我有一个问题，当我做一个调整图表。
当我调整大小我有翻译问题与徒手绘制

当我调整大小时，新的绘画最初出现的规模，但后一点图表移动

我的代码是：

  package testjavafxapplication; 
 
 import javafx.application.Application; 
 import javafx.beans.value.ChangeListener; 
 import javafx.beans.value.ObservableValue; 
 import javafx.collections.ObservableList; 
 import javafx.event.EventHandler; 
 import javafx.geometry.Bounds; 
 import javafx.scene.chart.CategoryAxis; 
 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; 
 import javafx.scene.paint.Color; 
 import javafx.scene.shape.LineTo; 
 import javafx.scene.shape.MoveTo; 
 import javafx.scene.shape.Path; 
 import javafx.scene.transform.Scale; 
 import javafx.scene.transform.Transform; 
 import javafx.scene.transform.Translate; 
 
 public class FreehandResize extends应用程序{
 
 private CategoryAxis xAxis = new CategoryAxis（）; 
 private NumberAxis yAxis = new NumberAxis（0.53000，0.53910，0.0001）; 
 private LineChart< String，Number> lineChart = new LineChart< String，Number> （xAxis，yAxis）; 
 private路径; 
 private double initialWidth; 
 private double initialheight; 
 private translation translate = new Translate（0，0）; 
 private scale scale = new Scale（1,1）; 
 private ChangeListener< Number> changeListener = new ChangeListener< Number>（）{
 
 @Override 
 public void changed（ObservableValue< ;? extends Number> observable，Number oldValue，Number newValue）{
 Bounds y_axisBounds = yAxis.getBoundsInLocal（）; 
 double xOffset = y_axisBounds.getMaxX（）; 
 
 translate.setX（xOffset）; 
 
 Bounds chartBounds = lineChart.getBoundsInLocal（）; 
 scale.setX（（chartBounds.getWidth（） -  xOffset）/ initialWidth）; 
 scale.setY（（chartBounds.getHeight（） -  xAxis.getBoundsInLocal（）。getHeight（））/ initialheight; 
} 
}; 
 private EventHandler< MouseEvent> mouseHandler = new EventHandler< MouseEvent>（）{
 
 @Override 
 public void handle（MouseEvent mouseEvent）{
 
 double targetX =（mouseEvent.getX translate.getX（））/ scale.getX（）; 
 double targetY = mouseEvent.getY（）/ scale.getY（）; 
 
 if（mouseEvent.getEventType（）== MouseEvent.MOUSE_PRESSED）{
 path.getElements（）。add（new MoveTo（targetX，targetY））; 
} else if（mouseEvent.getEventType（）== MouseEvent.MOUSE_DRAGGED）{
 path.getElements（）。add（new LineTo（targetX，targetY））; 
} 
} 
 
}; 
 
 @Override 
 public void start（Stage Stage）{
 stage.setTitle（Resize line plot）; 
 
 yAxis.setTickLabelFormatter（new NumberAxis.DefaultFormatter（yAxis）{
 
 @Override 
 public String toString（Number object）{
 return String.format （％6.4f，object）; 
} 
}）; 
 
 lineChart.setCreateSymbols（false）; 
 lineChart.setAlternativeRowFillVisible（false）; 
 
 XYChart.Series series1 = new XYChart.Series（）; 
 series1.getData（）。add（new XYChart.Data（Jan，0.53185））; 
 series1.getData（）。add（new XYChart.Data（Feb，0.532235））; 
 series1.getData（）。add（new XYChart.Data（Mar，0.53234））; 
 series1.getData（）。add（new XYChart.Data（Apr，0.538765））; 
 series1.getData（）。add（new XYChart.Data（May，0.53442））; 
 series1.getData（）。add（new XYChart.Data（Jun，0.534658））; 
 series1.getData（）。add（new XYChart.Data（Jul，0.53023））; 
 series1.getData（）。add（new XYChart.Data（Aug，0.53001））; 
 series1.getData（）。add（new XYChart.Data（Sep，0.53589））; 
 series1.getData（）。add（new XYChart.Data（Oct，0.53476））; 
 series1.getData（）。add（new XYChart.Data（Nov，0.530123））; 
 series1.getData（）。add（new XYChart.Data（Dec，0.53035））; 
 lineChart.getData（）。addAll（series1）; 
 
 BorderPane pane = new BorderPane（）; 
 pane.setCenter（lineChart）; 
 
场景场景=新场景（窗格，800,600）; 
 stage.setScene（scene）; 
 
 path = new Path（）; 
 path.setStrokeWidth（2）; 
 path.setStroke（Color.CHOCOLATE）; 
 
 ObservableList< Transform> transforms = path.getTransforms（）; 
 transforms.add（0，translate）; 
 transforms.add（1，scale）; 
 
 scene.setOnMouseClicked（mouseHandler）; 
 scene.setOnMouseDragged（mouseHandler）; 
 scene.setOnMouseEntered（mouseHandler）; 
 scene.setOnMouseExited（mouseHandler）; 
 scene.setOnMouseMoaved（mouseHandler）; 
 scene.setOnMousePressed（mouseHhandler）; 
 scene.setOnMouseReleased（mouseHandler）; 
 
 pane.getChildren（）。add（path）; 
 
 scene.widthProperty（）。addListener（changeListener）; 
 scene.heightProperty（）。addListener（changeListener）; 
 
 stage.show（）; 
 Bounds axisBounds = yAxis.getBoundsInLocal（）; 
 double xOffset = axisBounds.getMaxX（）; 
 translate.setX（xOffset）; 
 
 Bounds chartBounds = lineChart.getBoundsInLocal（）; 
 initialWidth = chartBounds.getWidth（） -  xOffset; 
 initialheight = chartBounds.getHeight（） -  xAxis.getBoundsInLocal（）。getHeight（）; 
} 
 
 public static void main（String [] args）{
 launch（args） 
 
} 
} 
  

解决方案

看来你的坐标是基于错误的锚点。您需要找到一个包含图表本身的节点，并且只能使用此节点的坐标，而不是轴或场景。

我甚至建议将所有鼠标事件添加到该节点而不是场景，以避免过多的坐标转换。

另一个建议是使用 ScenicView 工具来调查您的应用程序，并查看哪些节点具有什么坐标并验证您的数学。

I have a code to draw freehand on a XYChart in JavaFX 2.0 I have a problem when I do a resize chart. When I do resize I have translating problem with freehand draws

When I resize the new draw appears initially out of scale, but after a little "chart move" the draw it fixes itself.

How can I improve it?

My code is:

package testjavafxapplication;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.chart.CategoryAxis;
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;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Transform;
import javafx.scene.transform.Translate;

public class FreehandResize extends Application {

 private CategoryAxis xAxis = new CategoryAxis();
 private NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0001);
 private LineChart<String, Number> lineChart = new LineChart<String, Number>       (xAxis, yAxis);
 private Path path;
 private double initialWidth;
 private double initialheight;
 private Translate translate = new Translate(0, 0);
 private Scale scale = new Scale(1, 1);
 private ChangeListener<Number> changeListener = new ChangeListener<Number>() {

    @Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
  Bounds y_axisBounds = yAxis.getBoundsInLocal();
  double xOffset = y_axisBounds.getMaxX();

  translate.setX(xOffset);

  Bounds chartBounds = lineChart.getBoundsInLocal();
  scale.setX((chartBounds.getWidth() - xOffset) / initialWidth);
  scale.setY((chartBounds.getHeight() - xAxis.getBoundsInLocal().getHeight()) / initialheight);
    }
  };
private EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {

@Override
public void handle(MouseEvent mouseEvent) {

  double targetX = (mouseEvent.getX() - translate.getX()) / scale.getX();
  double targetY = mouseEvent.getY() / scale.getY();

  if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
    path.getElements().add(new MoveTo(targetX, targetY));
  } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
    path.getElements().add(new LineTo(targetX, targetY));
  }
}

 };

   @Override
   public void start(Stage stage) {
   stage.setTitle("Resize line plot");

   yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {

  @Override
  public String toString(Number object) {
    return String.format("%6.4f", object);
  }
});

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

XYChart.Series series1 = new XYChart.Series();
series1.getData().add(new XYChart.Data("Jan", 0.53185));
series1.getData().add(new XYChart.Data("Feb", 0.532235));
series1.getData().add(new XYChart.Data("Mar", 0.53234));
series1.getData().add(new XYChart.Data("Apr", 0.538765));
series1.getData().add(new XYChart.Data("May", 0.53442));
series1.getData().add(new XYChart.Data("Jun", 0.534658));
series1.getData().add(new XYChart.Data("Jul", 0.53023));
series1.getData().add(new XYChart.Data("Aug", 0.53001));
series1.getData().add(new XYChart.Data("Sep", 0.53589));
series1.getData().add(new XYChart.Data("Oct", 0.53476));
series1.getData().add(new XYChart.Data("Nov", 0.530123));
series1.getData().add(new XYChart.Data("Dec", 0.53035));
lineChart.getData().addAll(series1);

BorderPane pane = new BorderPane();
pane.setCenter(lineChart);

Scene scene = new Scene(pane, 800, 600);
stage.setScene(scene);

path = new Path();
path.setStrokeWidth(2);
path.setStroke(Color.CHOCOLATE);

ObservableList<Transform> transforms = path.getTransforms();
transforms.add(0, translate);
transforms.add(1, scale);

scene.setOnMouseClicked(mouseHandler);
scene.setOnMouseDragged(mouseHandler);
scene.setOnMouseEntered(mouseHandler);
scene.setOnMouseExited(mouseHandler);
scene.setOnMouseMoved(mouseHandler);
scene.setOnMousePressed(mouseHandler);
scene.setOnMouseReleased(mouseHandler);

pane.getChildren().add(path);

scene.widthProperty().addListener(changeListener);
scene.heightProperty().addListener(changeListener);

stage.show();
Bounds axisBounds = yAxis.getBoundsInLocal();
double xOffset = axisBounds.getMaxX();
translate.setX(xOffset);

Bounds chartBounds = lineChart.getBoundsInLocal();
initialWidth = chartBounds.getWidth() - xOffset;
initialheight = chartBounds.getHeight() - xAxis.getBoundsInLocal().getHeight();
 }

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

   }
 }

解决方案

It seems you coordinates are based on wrong anchors. You need to find a node which contains graph itself and work only with this node's coordinates, not axis or scene.

I would even advise to add all mouse events to that node instead of scene to avoid excessive coordinates translation.

Another advise would be use ScenicView tool to investigate your application and see which nodes has what coordinates and verify your math.

这篇关于Javafx 2图表调整与徒手绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！