JavaFx 2 draw arrows - charts

Question

This code plots a simple XYLine Chart
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class XyChart extends Application {
#Override
public void start(Stage stage) {
stage.setTitle("Line plot");
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis(1, 21,0.1);
yAxis.setTickUnit(1);
yAxis.setPrefWidth(35);
yAxis.setMinorTickCount(10);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis){
#Override
public String toString(Number object){
String label;
label = String.format("%7.2f", object.floatValue());
return label;
}
});
final LineChart<String, Number>lineChart = new LineChart<String, Number>(xAxis, yAxis);
lineChart.setCreateSymbols(false);
lineChart.setAlternativeRowFillVisible(false);
lineChart.setLegendVisible(false);
XYChart.Series series1 = new XYChart.Series();
series1.getData().add(new XYChart.Data("Jan", 1));
series1.getData().add(new XYChart.Data("Feb", 4));
series1.getData().add(new XYChart.Data("Mar", 2.5));
series1.getData().add(new XYChart.Data("Apr", 5));
series1.getData().add(new XYChart.Data("May", 6));
series1.getData().add(new XYChart.Data("Jun", 8));
series1.getData().add(new XYChart.Data("Jul", 12));
series1.getData().add(new XYChart.Data("Aug", 8));
series1.getData().add(new XYChart.Data("Sep", 11));
series1.getData().add(new XYChart.Data("Oct", 13));
series1.getData().add(new XYChart.Data("Nov", 10));
series1.getData().add(new XYChart.Data("Dec", 20));
BorderPane pane = new BorderPane();
pane.setCenter(lineChart);
Scene scene = new Scene(pane, 800, 600);
lineChart.setAnimated(false);
lineChart.getData().addAll(series1);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I would like to draw arrows on the chart by left mouse click pressed and moved, such as this example
How to do this?
Thanks all.

Answer 1

You can add mouse handlers to the border pane and draw the arrow when the mouse moves.
There might be better ways, but this is what I came up with:
Add mouse handler to your border pane:
MouseHandler mh = new MouseHandler( pane );
pane.setOnMouseClicked( mh );
pane.setOnMouseMoved( mh );
The handler class could be as follows:
class MouseHandler implements EventHandler< MouseEvent > {
private boolean gotFirst = false;
private Line line, head1, head2;
private Pane pane;
private double x1, y1, x2, y2;
double phi = Math.toRadians( 40 );
double barb = 20;
public MouseHandler( Pane pane ) {
this.pane = pane;
}
#Override
public void handle( MouseEvent event ) {
if( event.getEventType() == MouseEvent.MOUSE_CLICKED ) {
if( !gotFirst ) {
x1 = x2 = event.getX();
y1 = y2 = event.getY();
line = new Line( x1, y1, x2, y2 );
head1 = new Line( x2, y2, x2, y2 );
head2 = new Line( x2, y2, x2, y2 );
pane.getChildren().add( line );
pane.getChildren().add( head1 );
pane.getChildren().add( head2 );
gotFirst = true;
} else {
line = null;
gotFirst = false;
}
} else {
if( line != null ) {
x2 = event.getX();
y2 = event.getY();
// update line
line.setEndX( x2 );
line.setEndY( y2 );
// draw head
// http://www.coderanch.com/t/340443/GUI/java/Draw-arrow-head-end-line
double dx = x2 - x1;
double dy = y2 - y1;
double theta = Math.atan2( dy, dx );
double x, y, rho = theta + phi;
x = x2 - barb * Math.cos( rho );
y = y2 - barb * Math.sin( rho );
head1.setStartX( x2 );
head1.setStartY( y2 );
head1.setEndX( x );
head1.setEndY( y );
rho = theta - phi;
x = x2 - barb * Math.cos( rho );
y = y2 - barb * Math.sin( rho );
head2.setStartX( x2 );
head2.setStartY( y2 );
head2.setEndX( x );
head2.setEndY( y );
}
}
}
}