JavaFX 2:包含文本的可调整大小的矩形

Question

我想显示一个包含文本/标签的矩形.为此,我创建了一个堆栈窗格,并为其添加了一个矩形和一个标签.但是文本/标签未正确居中.它位于矩形之外(左侧).这是我目前使用的代码:

createRectangle(String name) {
   pane = new StackPane();
   text = new Label(name);
   rect = new Rectangle();
   // bind rectangle width to text width and add 10 
   rect.widthProperty().bind(text.widthProperty().add(10));
   rect.heightProperty().bind(text.heightProperty().add(10));

   // add to stackpane
   pane.getChildren().addAll(rect,text);

   // display stackpane
   getChildren().add(pane)
}

我已经尝试绑定矩形的xProperty()和yProperty(),更改stackpane(setAlignment(Pos.CENTER))和其他东西的对齐方式,但没有成功.

当我使用固定的矩形大小(例如新的矩形(30,30))并且不使用绑定时,标签在矩形内正确居中.但是,矩形的大小需要根据标签大小进行调整:

// label is placed correctly in the center of the rectangle
createRectangle(String name) {
   pane = new StackPane();
   text = new Label(name);
   rect = new Rectangle(30,30);

   // add to stackpane
   pane.getChildren().addAll(rect,text);

   // display stackpane
   getChildren().add(pane)
}

Answer 1

对于标注尺寸的背景

只需在Label上直接使用CSS,就不需要任何其他节点.

Label label = new Label("Sally collects seashells on the seashore");
label.setStyle("-fx-background-color: coral; -fx-padding: 10px;");

填充可用于调整标签周围的矩形背景区域的大小.

对于可调整大小的背景

您不需要Rectangle节点,将标签放在StackPane中并在StackPane上设置背景:

Label label = new Label("Sally collects seashells on the seashore");
StackPane centeredLabel = new StackPane(label);
centeredLabel.setStyle("-fx-background-color: coral;");

可执行样本

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class LabelBackground extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Label label = new Label("Sally collects seashells on the seashore");
        StackPane centeredLabel = new StackPane(label);
        centeredLabel.setStyle("-fx-background-color: coral;");

        StackPane root = new StackPane(centeredLabel);
        root.setPadding(new Insets(10));

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

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

注意:此答案中的内联样式仅用于演示目的,最佳实践是使用CSS样式表进行CSS样式定义.

我还想使用其他形状(尤其是圆角矩形和圆形)而不是普通的矩形.这可以通过在答案中提出的堆叠窗格或标签本身的样式来实现吗？

是的,任何派生自Region的东西(包括StackPane等布局窗格和Label等控件)都可以通过CSS进行相当广泛的设计.

要获得圆角背景,您可以使用-fx-background-radius.

要获得任意形状的背景,您可以使用fx-shape,但您可能会发现将文本放置在任意形状的背景中很棘手.

你也可以在代码中编写一个形状,并使用绑定来使你的东西适合你最初在你的问题中尝试.

如果需要进行大量的微调,那么你可以对region进行子类化并覆盖layoutChildren方法,为该方法中的所有子进程执行精确的布局计算(这是大多数内置JavaFX控件处理布局的方式)在他们的皮肤类).

无论如何,一个看似简单的问题并不总是有一个简单的答案,因为在你可以做的事情的方式和你可能想要做的许多微妙的差异,如如何处理包装文本,结束了很多变化,插件,是否要超出最小尺寸的文本等.

但是,对于矩形或圆角矩形背景的最常见任务,我只是坚持直接在标签上使用CSS样式.通过使用样式表,您可以轻松地完全更改标签的应用程序样式.

这是一个更广泛的,矫枉过正的样本:

LabelBackground.java

import javafx.application.Application;
import javafx.beans.binding.DoubleBinding;
import javafx.geometry.*;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;

public class LabelBackground extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Pane starLabel = labelOnStyledBackground(
                "Practical Principles of Plain and Perfect Pronunciation.",
                "star-label"
        );

        StackPane labelOnResizableBackground = labelOnStyledBackground(
                "Sally collects seashells on the seashore",
                "resizable-background"
        );
        labelOnResizableBackground.setPrefHeight(60);

        Label squareLabel = createLabel(
                "Betty Botter bought a bit of butter.",
                "square-label"
        );

        Label roundedLabel = createLabel(
                "Peter Piper picked a peck of pickled peppers.",
                "rounded-label"
        );

        Node ellipticalLabel = createEllipticalLabel(
                "Round and round the rugged rock the ragged rascal ran.",
                "elliptical-label"
        );

        VBox root = new VBox(
                10,
                starLabel,
                labelOnResizableBackground,
                squareLabel,
                roundedLabel,
                ellipticalLabel
        );
        VBox.setVgrow(labelOnResizableBackground, Priority.SOMETIMES);
        root.setAlignment(Pos.TOP_CENTER);
        root.setPadding(new Insets(10));

        Scene scene = new Scene(root);
        scene.getStylesheets().add(
                LabelBackground.class.getResource(
                        "label-styles.css"
                ).toExternalForm()
        );
        stage.setScene(scene);
        stage.setTitle("Resize me!");
        stage.show();
    }

    private Label createLabel(String text, String styleClass) {
        Label label = new Label(text);
        label.getStyleClass().add(styleClass);

        return label;
    }

    private StackPane labelOnStyledBackground(String text, String styleClass) {
        Label label = new Label(text);
        StackPane container = new StackPane(label);
        container.getStyleClass().add(styleClass);

        return container;
    }

    private Group createEllipticalLabel(String text, String styleClass) {
        final double INSET = 20;

        Label label = new Label(text);

        Ellipse ellipse = new Ellipse();
        ellipse.getStyleClass().add("ellipse");

        DoubleBinding halfWidth  = label.widthProperty().divide(2).add(INSET);
        DoubleBinding halfHeight = label.widthProperty().divide(4).add(INSET);

        ellipse.radiusXProperty().bind(halfWidth);
        ellipse.radiusYProperty().bind(halfHeight);

        ellipse.centerXProperty().bind(halfWidth);
        ellipse.centerYProperty().bind(halfHeight);

        label.setLayoutX(INSET);
        label.layoutYProperty().bind(halfHeight.subtract(label.heightProperty().divide(2)));

        Group group = new Group(ellipse, label);
        group.getStyleClass().add(styleClass);

        return group;
    }

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

标签styles.css的

.root {
    -fx-font-size: 16px;
}

.rounded-label {
    -fx-background-color: cadetblue;
    -fx-padding: 10px;
    -fx-background-radius: 10px;
}

.square-label {
    -fx-background-color: plum;
    -fx-padding: 10px;
}

.star-label {
    -fx-background-color: gold;
    -fx-padding: 120px;
    /* shape courtesy of Smiffy's star place: http://www.smiffysplace.com/stars.html */
    -fx-shape: "M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000";
}

.resizable-background {
    -fx-background-color: coral;
}

.elliptical-label .ellipse {
    -fx-fill: lightpink;
}

如果您对进一步的样品非常热衷,请查看QuoteMaker应用程序处理可调整大小的标签背景样式的方式.