在GridPane中剪辑HBox [英] Clip an HBox inside a GridPane
问题描述
我有一个JavaFX 2 GUI，其中包括一个HBox填充GridPane的单元格之一.我所有的组件都是动态调整大小的.这显示正常，没有问题.
I have a JavaFX 2 GUI which includes an HBox filling one of the cells of a GridPane. All of my components are dynamically sized. This displays fine, no problems.
第一个问题:我想将HBox的内容剪切到它们所在的GridPane单元格的边缘，这样就不会显示任何溢出，但是我无法确定如何.我尝试将HBox的剪辑设置为相同大小的矩形，但这不起作用.我猜是因为它使用的是用于布局的尺寸，而不是所显示内容的尺寸.我应该改用GridPane本身，还是至少使用其属性?
First question: I'd like to clip the contents of the HBox at the edge of the GridPane cell they're in, so that none of the overflow is displayed, but I can't work out how. I've tried setting the clip for my HBox to a rectangle of the same size but this doesn't work. I guess because it's using the dimensions used for layout, rather than dimensions of what's displayed. Should I instead be clipping on the GridPane itself, or at least using its properties?
第二个问题(加分):剪辑与Node的平移和缩放如何相互作用?
Second question (for a bonus point): how does clipping interact with translation and scaling of the Node?
感谢您的帮助.
推荐答案
我尝试了几个简短的程序，试图在GridPane中剪辑节点. 我没有一个很好的尝试剪辑实现的方法，尽管其中大多数都以某种方式或其他方式根据要求工作.
I tried a couple of short program with attempts to clip the Nodes within a GridPane. None of the clip attempt implementations I really liked all that well, though most of them worked in some fashion or other depending on requirements.
最可能符合您的描述的剪辑尝试是最后一个将剪辑的节点包装在具有其自身大小指定符的区域中的示例，以使剪辑的区域的布局与应用于该节点的剪辑节点的大小匹配.
The clip attempt which most closely seemed to fit your description is the last which wraps the clipped node in a region with it's own size specifiers, so that layout of the clipped region matches the size of the clip node applied to the node.
class ClippedNode extends Region {
private final Node content;
private final double width;
private final double height;
ClippedNode(Node content, double width, double height) {
this.content = content;
this.width = width;
this.height = height;
content.setClip(new Rectangle(width, height));
getChildren().setAll(content);
}
@Override protected double computeMinWidth(double d) { return width; }
@Override protected double computeMinHeight(double d) { return height; }
@Override protected double computePrefWidth(double d) { return width; }
@Override protected double computePrefHeight(double d) { return height; }
@Override protected double computeMaxWidth(double d) { return width; }
@Override protected double computeMaxHeight(double d) { return height; }
}
下面提供了演示各种剪辑方法的完整可执行示例:
A full executable sample demonstrating various clip approaches is provided below:
import java.util.Iterator;
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class GridClipping extends Application {
String buttonText[] = "The quick brown fox jumped over the lazy dog".split(" ");
String[] colors = { "aqua", "coral", "cornsilk", "cornflowerblue" };
@Override public void start(Stage stage) throws Exception {
final GridPane grid = new GridPane();
grid.addRow(0, createHBox("aqua"), createHBox("coral"));
grid.addRow(1, createHBox("cornsilk"), createHBox("cornflowerblue"));
grid.setStyle("-fx-border-color: red;");
final GridPane gridWithClippedBoxes = new GridPane();
gridWithClippedBoxes.addRow(0, createClipWrappedHBox("aqua"), createClipWrappedHBox("coral"));
gridWithClippedBoxes.addRow(1, createClipWrappedHBox("cornsilk"), createClipWrappedHBox("cornflowerblue"));
gridWithClippedBoxes.setStyle("-fx-border-color: red;");
final RadioButton noClip = new RadioButton("No Clip");
final RadioButton restrictGridSize = new RadioButton("Restrict Max Grid Size (doesn't work)");
final RadioButton clipGrid = new RadioButton("Clip Grid");
final RadioButton clipHBoxes = new RadioButton("Clip HBoxes");
final RadioButton clipWrappedHBoxes = new RadioButton("Clip Wrapped HBoxes");
final ToggleGroup clipRadios = new ToggleGroup();
clipRadios.getToggles().setAll(
noClip,
restrictGridSize,
clipGrid,
clipHBoxes,
clipWrappedHBoxes
);
final Rectangle gridClip = new Rectangle(0, 0, 100, 25);
clipGrid.selectedProperty().addListener(new ChangeListener<Boolean>() {
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasClipped, Boolean clipped) {
if (clipped != null) {
if (clipped) {
grid.setClip(gridClip);
} else {
grid.setClip(null);
}
}
}
});
restrictGridSize.selectedProperty().addListener(new ChangeListener<Boolean>() {
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasClipped, Boolean clipped) {
if (clipped != null) {
if (clipped) {
// this does not work in our case.
// the minimum size of the grid components > the max size of the grid.
// so the grid expands in size to fit the minimum size of it's components anyway.
grid.setMaxSize(100, 25);
} else {
grid.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
}
}
}
});
clipHBoxes.selectedProperty().addListener(new ChangeListener<Boolean>() {
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasClipped, Boolean clipped) {
if (clipped != null) {
if (clipped) {
for (Node gridCell: grid.getChildren()) {
Rectangle cellClip = new Rectangle(100, 12);
gridCell.setClip(cellClip);
}
} else {
for (Node gridCell: grid.getChildren()) {
gridCell.setClip(null);
}
}
}
}
});
final VBox layout = new VBox(10);
clipWrappedHBoxes.selectedProperty().addListener(new ChangeListener<Boolean>() {
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasClipped, Boolean clipped) {
if (clipped != null) {
if (clipped) {
layout.getChildren().set(0, gridWithClippedBoxes);
} else {
layout.getChildren().set(0, grid);
}
}
}
});
noClip.fire();
layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");
layout.getChildren().setAll(
grid,
noClip,
restrictGridSize,
clipGrid,
clipHBoxes,
clipWrappedHBoxes
);
stage.setScene(new Scene(layout));
stage.show();
}
private Region createHBox(String webColor) {
HBox box = new HBox(5);
box.setStyle("-fx-background-color: " + webColor + ";");
for (String text: buttonText) {
box.getChildren().add(new Text(text));
}
box.setOpacity(0.5);
return box;
}
private Region createClipWrappedHBox(String webColor) {
return new ClippedNode(createHBox(webColor), 100, 12);
}
class ClippedNode extends Region {
private final Node content;
private final double width;
private final double height;
ClippedNode(Node content, double width, double height) {
this.content = content;
this.width = width;
this.height = height;
content.setClip(new Rectangle(width, height));
getChildren().setAll(content);
}
@Override protected double computeMinWidth(double d) { return width; }
@Override protected double computeMinHeight(double d) { return height; }
@Override protected double computePrefWidth(double d) { return width; }
@Override protected double computePrefHeight(double d) { return height; }
@Override protected double computeMaxWidth(double d) { return width; }
@Override protected double computeMaxHeight(double d) { return height; }
}
public static void main(String[] args) { Application.launch(args); }
}
这篇关于在GridPane中剪辑HBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
