仅将 dropShadow 添加到网格窗格 JavaFx 2.2 的边框答案

【问题标题】：Add dropShadow only to border of grid pane JavaFx 2.2仅将 dropShadow 添加到网格窗格 JavaFx 2.2 的边框
【发布时间】：2014-01-20 20:17:18
【问题描述】：

只想将阴影添加到网格窗格的边框而不是内部子元素

这是显示效果的屏幕图像。

【问题讨论】：

标签： css javafx-2

【解决方案1】：

使用 StackPane 并将您的 GridPane 放入其中。

使用 CSS 为您的 StackPane 设置样式，以应用背景颜色、插图和阴影。

有关示例 CSS，请参阅 Drop Shadow in an undecorated Pane! JAVAFX。

这是一个小的独立示例应用程序（在 OS X 10.9 上使用 Java 8b120），来演示效果：

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

public class Shadowed extends Application {
    public static void main(String[] args) { launch(args); }

    @Override
    public void start(Stage stage) throws Exception {
        Label clear = new Label("Clear, with no shadow");
        StackPane shadowedPane = new StackPane(clear);
        shadowedPane.setStyle(
                "-fx-background-color: palegreen; " +
                "-fx-background-insets: 10; " +
                "-fx-background-radius: 10; " +
                "-fx-effect: dropshadow(three-pass-box, purple, 10, 0, 0, 0);"
        );
        shadowedPane.setPrefSize(200, 50);
        stage.setScene(new Scene(shadowedPane));
        stage.show();
    }
}

解决其他问题

CSS 是唯一的选择吗？

不，这可以通过使用DropShadow 效果在代码而不是 CSS 中完成。

shadowedPane.setEffect(new DropShadow(10, Color.PURPLE));

为什么有效？

因为设置背景为应用阴影效果的节点提供了清晰的边缘。

为什么 DropShadow 的工作方式会因应用在根节点或嵌套容器上而有所不同？

在根节点或嵌套容器之间的阴影处理中没有真正不同的行为。投影效果取决于应用该效果的项目是否具有透明（或空）背景。请注意，虽然根节点通常会填充一个阶段。因此，如果根节点具有不透明的背景颜色并且没有提供插图，则根节点上的阴影将不会被看到，因为它会落在舞台的可见区域之外。

我会猜测发生了什么。我认为投影效果所做的是计算节点的外部形状，然后对其应用阴影。当该节点具有背景颜色时，您将看到节点背景的阴影，这是在提供的图像中看到的。如果节点没有背景色，那么节点的边是从子节点开始计算的，所以所有的子节点都有阴影。

现在发生的情况是，在提出问题时的 JavaFX 2.2 和 JavaFX 8 之间，JavaFX 的默认主题从 Caspian 转移到了 Modena。默认情况下，里海窗格没有任何背景颜色。但是对于摩德纳，默认情况下窗格确实具有轻微的灰白色背景色。这意味着在 Java 8 中默认情况下不会在网格窗格中出现原始海报的模糊文本，因为 GridPane 将具有被遮蔽的背景，而不是被遮蔽的内部文本。这可以通过运行以下程序并更改注释行以将样式表设置为 Caspian 来验证：

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Shadowed extends Application {
    public static void main(String[] args) { launch(args); }

    @Override
    public void start(Stage stage) throws Exception {
//        setUserAgentStylesheet(STYLESHEET_CASPIAN);
        Label clear = new Label("Clear, with no shadow");
        GridPane shadowedPane = new GridPane();
        shadowedPane.add(clear, 0, 0);
        GridPane.setHalignment(clear, HPos.CENTER);
        GridPane.setValignment(clear, VPos.CENTER);
        GridPane.setHgrow(clear, Priority.ALWAYS);
        GridPane.setVgrow(clear, Priority.ALWAYS);
        shadowedPane.setStyle(
//                "-fx-background-color: transparent; " +
//                "-fx-background-color: palegreen; " +
                "-fx-background-insets: 10; " +
                "-fx-background-radius: 10; "
        );
        shadowedPane.setPrefSize(200, 50);
        shadowedPane.setEffect(new DropShadow(10, Color.PURPLE));
        stage.setScene(new Scene(shadowedPane));
        stage.show();
    }
}

【讨论】：

添加了一个更简单的解决方案的示例。
CSS 是唯一的选择吗？为什么它有效？为什么DropShadow 的工作方式会根据它是应用于根节点还是嵌套容器而有所不同？

【解决方案2】：

jewelsea 的回答是正确的，但是请注意，当它不起作用时

// explicitly transparent
-fx-background-color: transparent;

或

// effectively transparent
-fx-background-color: #FFFFFF00;

如果您尝试将投影应用到 (Stack)Pane 的整个边界框区域而不是子内容，这可能会非常令人沮丧！设置不透明的背景颜色是可行的，但如果您有许多元素并排或相互重叠（即靠近在一起），您可能会看到不希望的阴影重叠效果。

【讨论】：