java - Draw rectangles on top of a picture in JavaFX2 -

i'm trying draw rectangles on picture using mouse events in javafx2.

right now, have imageview in stackpane , add rectangles on it. problem if set rectangles' x , y mouseevent x , y, rectangles' stay centered in stackpane.

i guess it's stackpane centers every child default, can't find decent solution problem. guys please point me in right direction?

here code:

@fxml private stackpane stack_pane;  private final imageview image_view = new imageview();  private final set<rectangle> rectangles = new hashset<rectangle>();  private final simpledoubleproperty selectionrectinitialx = new simpledoubleproperty(); private final simpledoubleproperty selectionrectinitialy = new simpledoubleproperty();  private final simpledoubleproperty selectionrectcurrentx = new simpledoubleproperty(); private final simpledoubleproperty selectionrectcurrenty = new simpledoubleproperty();  private rectangle selectionrect;  @override public void initialize(final url fxmlfilelocation, final resourcebundle resources) {     this.stack_pane.getchildren().add(this.image_view);     this.selectionrect = this.getrectangle();      this.selectionrect.widthproperty().bind(this.selectionrectcurrentx.subtract(this.selectionrectinitialx));     this.selectionrect.heightproperty().bind(this.selectionrectcurrenty.subtract(this.selectionrectinitialy));      this.stack_pane.setonmousepressed(new eventhandler<mouseevent>()     {         @override         public void handle(final mouseevent event)         {             mainwindowcontroller.this.selectionrect.xproperty().set(event.getx());             mainwindowcontroller.this.selectionrect.yproperty().set(event.gety());             mainwindowcontroller.this.selectionrectinitialx.set(event.getx());             mainwindowcontroller.this.selectionrectinitialy.set(event.gety());         }     });      this.stack_pane.setonmousedragged(new eventhandler<mouseevent>()     {         @override         public void handle(final mouseevent event)         {             mainwindowcontroller.this.selectionrectcurrentx.set(event.getx());             mainwindowcontroller.this.selectionrectcurrenty.set(event.gety());             mainwindowcontroller.this.repaint();         }     });      this.stack_pane.setonmousereleased(new eventhandler<mouseevent>()     {         @override         public void handle(final mouseevent event)         {             final rectangle newrect = mainwindowcontroller.this.getrectangle();              newrect.setwidth(mainwindowcontroller.this.selectionrect.getwidth());             newrect.setheight(mainwindowcontroller.this.selectionrect.getheight());             newrect.setx(mainwindowcontroller.this.selectionrect.getx());             newrect.sety(mainwindowcontroller.this.selectionrect.gety());              mainwindowcontroller.this.selectionrectcurrentx.set(0);             mainwindowcontroller.this.selectionrectcurrenty.set(0);              mainwindowcontroller.this.rectangles.add(newrect);             mainwindowcontroller.this.repaint();         }     }); }  public rectangle getrectangle() {     final rectangle rect = new rectangle();     rect.setfill(color.web("firebrick", 0.4));     rect.setstroke(color.web("firebrick", 0.4));     return rect; }  public void repaint() {     this.stack_pane.getchildren().clear();     this.stack_pane.getchildren().add(this.image_view);     this.stack_pane.getchildren().add(this.selectionrect);     (final rectangle rect : this.rectangles)     {         this.stack_pane.getchildren().add(rect);     } } 

change stackpane anchorpane. anchorpane allows set x, y of each child relative pane. http://docs.oracle.com/javafx/2/api/javafx/scene/layout/anchorpane.html