Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to restrict visibility of items?

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.

like image 257
Chechulin Avatar asked Apr 10 '13 08:04

Chechulin


3 Answers

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

like image 158
zhujik Avatar answered Nov 02 '22 00:11

zhujik


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(); }
}
like image 38
Sergey Grinev Avatar answered Nov 02 '22 02:11

Sergey Grinev


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);
like image 6
MadisonTrash Avatar answered Nov 02 '22 01:11

MadisonTrash