在JavaFX2中的图片顶部绘制矩形

我试图使用JavaFX2中的鼠标事件在图片上绘制矩形

现在，我在StackPane中有一个ImageView，我在上面添加了矩形。问题是，即使我将矩形的X和Y设置为MouseEvent X和Y，矩形也会在堆栈窗格中居中

我猜默认情况下是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);
    }
}

@FXML
专用堆栈窗格堆栈_窗格；
私有最终ImageView image_view=新ImageView（）；
私有最终集矩形=新HashSet（）；
私有最终SimpleDoubleProperty selectionRectInitialX=新SimpleDoubleProperty（）；
private final SimpleDoubleProperty selectionRectInitialY=新SimpleDoubleProperty（）；
私有最终SimpleDoubleProperty selectionRectCurrentX=新SimpleDoubleProperty（）；
private final SimpleDoubleProperty SelectionRecCurrenty=新SimpleDoubleProperty（）；
私有矩形选择矩形；
@凌驾
public void initialize（最终URL fxmlFileLocation，最终ResourceBundle资源）
{
this.stack_pane.getChildren（）.add（this.image_视图）；
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（新的EventHandler（）
{
@凌驾
公共无效句柄（最终MouseeEvent事件）
{
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.setOnMouseDrawed（新的EventHandler（）
{
@凌驾
公共无效句柄（最终MouseeEvent事件）
{
MainWindowController.this.selectionRectCurrentX.set（event.getX（））；
MainWindowController.this.selectionRectCurrentY.set（event.getY（））；
MainWindowController.this.repaint（）；
}
});
this.stack_pane.setOnMouseReleased（新的EventHandler（）
{
@凌驾
公共无效句柄（最终MouseeEvent事件）
{
最终矩形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（）；
}
});
}
公共矩形getRectangle（）
{
最终矩形rect=新矩形（）；
矩形设置填充（Color.web（“firebrick”，0.4））；
直接设置行程（颜色web（“firebrick”，0.4））；
返回矩形；
}
公共无效重绘（）
{
这个.stack_pane.getChildren（）.clear（）文件；
this.stack_pane.getChildren（）.add（this.image_视图）；
this.stack_pane.getChildren（）.add（this.selectionRect）；
for（最终矩形：this.rectanges）
{
这个.stack_pane.getChildren（）.add（rect）；
}
}

将StackPane更改为AnchorPane。AnchorPane允许您设置每个子级相对于窗格的X、Y

尝试设置StackPane的对齐方式：

StackPane.setAlignment（选择直线，位置居中左）

---

请参阅Pos类的值参考。

哇，太简单了！谢谢！