在JavaFX2中的圖片頂部繪製矩形

Question

我試圖在JavaFX2中使用鼠標事件在圖片上繪製矩形。

現在，我在一個StackPane中有一個ImageView，並且在它上面添加了Rectangles。問題是即使我將Rectangles的X和Y設置爲MouseEvent X和Y，Rectangles的居中位置在StackPane中。

我想這是StackPane的默認中心每個孩子，但我找不到一個體面的解決方案的問題。請你們指點我正確的方向嗎？

這裏是我的代碼：

@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); 
    for (final Rectangle rect : this.rectangles) 
    { 
     this.stack_pane.getChildren().add(rect); 
    } 
} 

Answer 1

變化StackPane到AnchorPane。 AnchorPane允許你設置每個孩子相對於窗格的X，Y. http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

Answer 2

嘗試設置StackPane的對齊：

StackPane.setAlignment（selectionRect，Pos.CENTER_LEFT）;

請參考here作爲Pos類的值參考。