在JavaFX2中在图片上绘制矩形

Question

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

目前，我在StackPane中有一个ImageView，并在其上添加矩形。问题是，即使我将矩形的X和Y设置为鼠标事件的X和Y，矩形仍然保持在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);
    }
}

- sifrenette

Answer 1

将StackPane更改为AnchorPane。 AnchorPane允许您相对于Pane设置每个子元素的X、Y。 http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

- kithril

---

哇，太简单了！非常感谢！ - sifrenette

Answer 2

尝试设置StackPane的对齐方式：

StackPane.setAlignment(selectionRect, Pos.CENTER_LEFT);

请参考此处Pos类的值引用。

- Thinhbk