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

2023-11-21

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

enter image description here here is the image of screen showing the effect.


使用 StackPane 并将 GridPane 放入其中。

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

See 在未装饰的窗格中放置阴影! JAVAFX一些 CSS 示例。

这是一个小型独立示例应用程序(在 OS X 10.9 上使用 Java 8b120),以演示效果:

purple haze

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 是唯一的选择吗?

不,这可以通过使用代码而不是 CSS 来完成阴影 effect.

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();
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅将 dropShadow 添加到网格窗格 JavaFx 2.2 的边框 的相关文章

  • 创建由线连接的 CSS3 圆圈

    我必须在 CSS 中实现以下圆形和线条组合 并且我正在寻找有关如何有效实现此功能的指示 圆圈和线条应如下所示 我能够这样实现圆圈 span step background ccc border radius 0 8em moz border
  • SVG 中虚线的悬停事件

    带有线 或路径 的 SVG 使用stroke dasharray当用户将鼠标悬停在虚线的实心部分上时 似乎只会触发 CSS 和 JS 悬停事件 https codepen io anon pen YeXoZy https codepen i
  • 当您点击外部时,Bootstrap 3 Mobile 导航不会崩溃

    当我单击 触摸菜单外部时 我的 Bootstrap 3 移动菜单确实会折叠 我可以想出一个解决问题的方法 document on touchstart click html not nav function navbar collapse
  • React Native Tab 视图的高度始终等于最高选项卡的高度

    介绍 我有一个 FlatList 它在页脚中呈现一个选项卡视图 此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换 所以 最后这些是同级 FlatList Problem 第一个 FlatList A 的高度
  • jquery菜单栏浮动顶部

    我试图使菜单栏不断浮动在浏览器的顶部 因此当他们向下滚动页面时 菜单栏仍位于顶部 我该怎么做呢 Regards CSS 标签position fixed 即使滚动 也会使其保持在屏幕上的同一位置 使用它 然后将其定位为top right b
  • 基于多个类选择元素

    我有一个样式规则 我想在标签具有two类 有没有办法不用 JavaScript 来执行此操作 换句话说 li class left ui class selector 我想应用我的风格规则only if the li两者都有 left an
  • CSS:结合纹理和颜色

    有人如何将用作背景图像的纹理和该纹理上方的背景颜色结合起来 这是纹理 我希望我的正文背景页面是这样的 我正在努力处理背景图像和背景颜色 http jsfiddle net 87K72 http jsfiddle net 87K72 body
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • jQuery:获取 HTML 表格第四行(仅)的第一列值

    我有一个名为 resultGridTable 的表 我有一个 jQuery 函数要在表的每一行上执行 在函数中 this 表示一行 对于第四行 我需要提醒 第四行 第一列值 我有以下代码 但它不起作用 我们怎样才能让它发挥作用呢 对于第五行
  • CSS3 与 JavaScript

    所以我试图在网页上创建一个动画 并试图找到一种使用 CSS3 来实现它的方法 但我对如何做到这一点感到非常困惑 我需要发生的是 当用户单击链接元素时 我希望 div 展开并填充特定于所单击的链接元素的内容 例如 当用户单击标题为 About
  • 如何缩放 SVG 路径以适应窗口大小?

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是
  • iPhone 4 上不稳定的 CSS3 动画

    我有一个非常简单的 或者至少我认为是 动画 我所做的只是 webkit background size 的动画 bubble position relative width 397px height 326px background url
  • 如何在绝对定位的 div 内用 CSS 创建粘性页脚?

    我想创建一个粘性页脚inside绝对定位的 div 元素 我的方法是将页脚 div 也绝对定位 在另一个相对定位的 页面 div 内 其中包含页面的实际内容 div class content div class page Some Lor
  • 动画和过渡的组合无法正常工作

    我一直在尝试添加一些基本的 CSS3 动画 目标是在按钮的单击事件上切换类 并根据添加的类对 div 进行动画处理 该代码对于 Firefox 中切换的第一次迭代完美运行 但对于 Chrome 等其他浏览器以及 Firefox 中的下一次迭
  • 表格固定标题和第一列 css/html

    我有一个包含大量行和列的表 但我想固定标题和第一列 这是我需要的图片 只有粉色部分必须水平和垂直滚动 但其他部分在滚动过程中必须保持可见 我的表位于 div 中 首先 我应该使用一张桌子还是四张桌子 蓝色桌子 红色桌子 绿色桌子和粉色桌子
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式

随机推荐

  • SQL Server 奇怪的多列分组场景和 OR

    我有一个奇怪的分组场景 并且在找出 SQL 中分组的最佳方法时遇到了一些麻烦 假设我们有下面一张表 CREATE TABLE Item KeyId VARCHAR 1 NOT NULL Col1 INT NULL Col2 INT NULL
  • java.lang.OutOfMemoryError:位图大小超出 VM 预算 - Android

    我在 Android 上开发了一个使用大量图像的应用程序 该应用程序运行一次 填充屏幕上的信息 Layouts Listviews Textviews ImageViews等 用户读取信息 没有动画 没有特效或者任何可以填满记忆的东西 有时
  • TabBarItems 并设置它们的图像大小?

    我目前正在向我的每个选项卡栏项目添加图像 我喜欢的一张图像的尺寸比条形项目的面积大得多 当我在故事板中设置栏项目的图像并运行模拟器时 带有该图像的栏按钮覆盖整个屏幕 现在我认为有一些自动方法可以让图像为每个栏按钮调整大小 遗憾的是事实并非如
  • 如何从航路 3 直接升级到航路 5

    开发由许多客户在许多生产环境中部署的产品 它至少包含一个 Spring Boot 应用程序 我们使用 Flyway 进行数据库模式迁移 从 Spring Boot 1 5 x 升级到 2 0 x 使我们的 Flyway 版本从 3 x 升级
  • InflateException 与来自官方设计库的 FloatingActionButton

    我在使用官方的时候遇到了一个bugFloatingActionButton来自 Google 的支持设计库 这是我的 LogCat android view InflateException Binary XML file line 34
  • 如何加快 Gensim Word2vec 模型加载时间?

    我正在构建一个聊天机器人 因此需要使用 Word2Vec 对用户的输入进行矢量化 我正在使用 Google 提供的包含 300 万个单词的预训练模型 GoogleNews vectors male300 所以我使用 Gensim 加载模型
  • 在 CMake 中获取目标依赖的所有源文件

    使用 CMake 如何获取进入可执行目标的所有源文件的列表 包括该可执行文件所依赖的所有目标中的所有源 我们在代码库中有一个模式 其中构建系统根据源树中的文件名和路径生成初始化程序调用程序 因此 我需要可执行目标所依赖的所有源文件的完整路径
  • Android - 如何使用新的存储访问框架将文件复制到外部 SD 卡

    我正在我的应用程序中实现文件浏览器功能 我知道如何使用 ACTION OPEN DOCUMENT TREE 意图获得外部 SD 卡的持久权限 以及如何使用 DocumentFile 类创建文件夹和删除文件 文件夹 但是 我无法找到将文件复制
  • 编译 ng-bind-html 后 ng-click 不起作用

    我有一个指令 app directive dir function compile sce return restrict E link function scope element attr scope watch content fun
  • 如何删除Python中的标点符号?

    我有一个问题 前任 我有一句话 s AAA BBB CCC 所以 我这样做 import string table str maketrans string punctuation s w translate table for w in
  • 公开受保护字段的最佳方式

    我有一个像这样的基类 public class BaseModalCommand protected object m commandArgument protected int m commandID protected int m en
  • 暂停脚本执行的 jQuery 确认框

    我正在寻找一个 jquery 漂亮的标准对话框替代品 jQUery UI 有一个很好的功能 但它不会像confirm 那样暂停脚本执行以等待响应 下面的演示应该显示两个 div 显示前面确认框的选择 但 jquery 对话框不会导致脚本等待
  • 如何让子模块触发 Jenkins 构建

    我有一个子模块 A 它不是独立的应用程序 它需要主应用程序才能工作 我想为 A 创建一个 CI 构建 以便每当将提交推送到 A 时 它都会触发使用主项目代码的构建 我该如何在詹金斯中做到这一点 我需要做什么 对 A 的提交会触发构建 该构建
  • Code Golf:重复文本的“颜色突出显示”

    Locked 这个问题及其答案是locked因为这个问题是题外话 但却具有历史意义 目前不接受新的答案或互动 感谢下面的 greg0ire 帮助理解关键概念 挑战 构建一个程序来查找所有子字符串并使用颜色属性 标记 它们 在 XML 中有效
  • 将单个 Excel 工作表另存为 CSV

    我需要解析 Excel 工作表 现在 我将每个单独的工作表另存为 csv 效果非常好 我使用 OpenCSV 来解析文件等 但创建这些 csv 文件很痛苦 在 Excel 中将单个工作表另存为 csv 的最简单 最快捷的方法是什么 我假设某
  • 使用 Shadow DOM 有哪些缺点?

    在教程中我只看到了 Shadow DOM 的优点 但也应该有缺点 在哪些情况下我们应该避免使用 Shadow DOM Shadow DOM 功能既可以被视为优点 也可以被视为缺点 风格隔离如果您想要的话 这是一个好处 但如果用户想从全局 C
  • 从预处理器中的常量中删除强制转换

    背景 在微控制器代码中 我使用生产商提供的库 其中定义了许多常量 如果我的一些常量 与微控制器外部的组件共享 与git subtree 和微控制器常数 例如 该库定义 ifdef SOME PARTICULAR MODEL define F
  • SSRS 2008 R2 - SSRS 2012 - ReportViewer:在 Safari/Chrome 中报告,但在 Firefox/Internet Explorer 8 中工作正常...为什么?

    我有一些简单的报告SSRS 2008 R2 但它们根本不会在 Safari 或 Chrome 中显示 根据微软的在线图书 这些浏览器的支持方式有限 但是 数据 加载 时钟完成后我看不到任何内容 页面顶部的参数栏和面包屑导航部分都在那里 此外
  • 仍然对 Python 中的可变默认参数值“陷阱”感到困惑[重复]

    这个问题在这里已经有答案了 我知道不应该使用可变的默认参数值在 Python 中 有一些例外 因为该值仅在定义函数时计算和存储一次 而不是在以后每次调用函数时计算和存储 我对此的理解是这样的 使用下面的例子 请原谅我的不精确的语言 因为我只
  • 仅将 dropShadow 添加到网格窗格 JavaFx 2.2 的边框

    只想将阴影添加到网格窗格的边框而不是内部子元素 here is the image of screen showing the effect 使用 StackPane 并将 GridPane 放入其中 使用 CSS 设置 StackPane