CODEWITHSUNDEEP
javaresizejavafx-2bounds
l2p
l2p

Reputation: 420

Pane not resizing to its transformed dimensions

I am working on a project where i want to display images with overlay.

My Idea was to create an AncorPane, put an ImageView in its background and then put several shapes above that. This does work.

Because the images are quite large they need to be scaled down according to the available space. Needless to say want to scale down all overlay-shapes that they stay in the same spot relative to the image. Visually this does work too by applying a Scale Transformation to the AncorPane, but here comes my problem.

The AncorPane gets its size from its children. But even though they are scaled down the AncorPane stays at the size of the untransformed image. This creates large amounts of whitespace. I assume it is a problem with the discrepancy between the layout bounds and the bounds in parent of non resizable nodes.

Does anybody have a suggestion on setting the actual size of the AncorPane ore another way of getting rid of this unwanted whitespace.

Example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;


public class test extends Application
{
    @Override
    public void start(final Stage stage) throws Exception
    {
        final ScrollPane scroll = new ScrollPane();
        final Scene scene = SceneBuilder.create().root(scroll).build();
        final VBox box = new VBox();

        final AnchorPane anchorPane = new AnchorPane();
        final ImageView imageView = new ImageView();
        final Shape overlayRectangle = new Rectangle(100, 100, 100, 100);

        scroll.setContent(box);
        box.getChildren().add(anchorPane);
        anchorPane.getChildren().addAll(imageView, overlayRectangle);
        overlayRectangle.toFront();

        imageView.setImage(new Image("http://cdn.sstatic.net/stackoverflow/img/sprites.png"));

        final Scale scale = new Scale(0.5, 0.5);
        anchorPane.getTransforms().add(scale);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(final String[] args)
    {
        launch();
    }
}

When running the example you can see that the scroll bars only disappear when you extend the window size to two time the image size. I know i could just disable the scroll bars. This might work in the example code, but bear in mind that this example is shortened to a large degree. I even cut out dynamic resizing.

Upvotes: 2

Views: 2610

Answers (2)

l2p
l2p

Reputation: 420

I'm going to answer my own question with a quote from the ScrollPane documentation in case someone finds this.

ScrollPane layout calculations are based on the layoutBounds rather than the boundsInParent (visual bounds) of the scroll node. If an application wants the scrolling to be based on the visual bounds of the node (for scaled content etc.), they need to wrap the scroll node in a Group.

Upvotes: 1

joey rohan
joey rohan

Reputation: 3566

The problem is beacuse of your 

  final Scale scale = new Scale(0.5, 0.5);
  anchorPane.getTransforms().add(scale);

Remove the scale as it will be already sizeToScene, but you are re-defining it. Does it solve your problem?

Also vary the scale() method's arguments to increase or reduce (kind of zooming effect) the white space problem.

Or insted of removing, change it to:

 final Scale scale = new Scale(1,1);
 anchorPane.getTransforms().add(scale);

Upvotes: 0

Related Questions