Question

Imagine that we have an AnchorPane, it has child Pane and there we have Button, for example.
I want this Button to be shown only inside this Pane.
In other words, it whould be cut by the Pane edges if it is not completely within Pane. Now the Button can be visible even if it is out of Pane rectangle.

Was it helpful?

Solution

this is what the clip of a node is made for.

Example:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;


public class ClipTest extends Application {

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

  @Override
  public void start(Stage primaryStage) throws Exception {

    Group root = new Group();

    StackPane pane = new StackPane();

    pane.setMaxWidth(100);
    pane.setMaxHeight(100);
    pane.setLayoutX(50);
    pane.setLayoutY(50);


    Rectangle rect = new Rectangle(100, 100);

    rect.setFill(null);
    rect.setStroke(Color.RED);

    Rectangle rect2 = new Rectangle(150, 150);

    rect2.setFill(Color.BLUE);

    pane.getChildren().addAll(rect2, rect);

    root.getChildren().add(pane);


//    Rectangle clip = new Rectangle(100, 100);
//    clip.setLayoutX(25);
//    clip.setLayoutY(25);
//    pane.setClip(clip);

    Scene scene = new Scene(root, 250, 250);

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

This produces:

without clip

Uncommenting the lines regarding the clip produces:

with clip

OTHER TIPS

You can use clipping functionality to achieve this.

public class ClipPane extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Pane clipPane = new Pane();
        clipPane.setStyle("-fx-border-color: red;");
        clipPane.setPrefSize(200, 200);

        Rectangle rect = new Rectangle(200, 200);
        clipPane.setClip(rect);

        Button btn = new Button("Hello, world!");
        btn.relocate(120, 0);
        clipPane.getChildren().add(btn);

        AnchorPane root = new AnchorPane();
        root.getChildren().add(clipPane);
        AnchorPane.setTopAnchor(clipPane, 50.);
        AnchorPane.setLeftAnchor(clipPane, 50.);

        stage.setScene(new Scene(root, 300, 300));
        stage.show();
    }

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

Another approach, with using of observables. To clip items outside pane bounds (like css oveflow:hidden):

// create rectangle with sizes of pane, 
// dont need to set x and y explictly 
// as positions of clip node are relative to parent node 
// (to pane in our case)
Rectangle clipRect = new Rectangle(pane.getWidth(), pane.getHeight());

// bind properties so height and width of rect 
// changes according pane's width and height
clipRect.heightProperty().bind(pane.heightProperty());
clipRect.widthProperty().bind(pane.widthProperty());

// set rect as clip rect
pane.setClip(clipRect);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top