3

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);
    }
}
4

2 に答える 2

2

StackPane を AnchorPane に変更します。AnchorPane を使用すると、各子の X、Y をペインに対して相対的に設定できます。 http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

于 2013-07-22T01:20:17.287 に答える
0

StackPane の配置を設定してみてください:

StackPane.setAlignment(selectionRect, Pos.CENTER_LEFT);

Posクラスの値リファレンスはこちら。

于 2013-07-22T03:04:43.310 に答える