javafx-8 - 删除 JavaFX 输入的内部阴影

Question

我使用Java8。
我正在尝试自定义 javafx.scene.control.TextField。

这是我的 CSS:

-fx-border-width: 1;
-fx-border-radius: 5;
-fx-border-color: #0000ff;
-fx-background-color: #ffffff;

这是一个结果:



请注意，它有一些“3D 效果”或“内阴影”。让我们仔细看看:



边框和背景之间有一些渐变，而我在 CSS 中指定了纯蓝色边框和白色背景。使用不同的颜色甚至多层背景都不会消除这种“内阴影”效果。设置 -fx-effect: null;什么都不给。

有趣的是:当我使用少于 4 条边界线(或边界半径)时，该效果“自动”消失:

-fx-border-width: 1 1 0 1;

问题是:是什么导致了“内阴影”效应以及如何关闭它？
我试图在 modena.css 和 TextFieldSkin 中找到答案，但一无所获。

附注。我可以使用一种解决方法:完全删除边框，并使用 2 层背景。但这很丑陋，并且打破了 UI 中的边框背景方法。

UPD

进一步的调查给出了一些结果:

任意 不对称控件喜欢 -fx-border-width: 1 1 2 1;或 -fx-border-radius: 4 4 4 5;按照 CSS 中的描述绘制。看起来 JavaFX 是逐行绘制的。

任意 对称式 控件喜欢 -fx-border-width: 1 1 1 1;或 -fx-border-width: 1; (也是一样)是用“渐变效果”绘制的。渐变颜色和宽度取决于 -fx-border-radius值(value)。这让我想到了图像缩放和像素模糊。

引擎盖下会发生什么，对称控制是否有一些“治愈”方法？

Answer 1

更新

在重新审查您的问题时，我认为您的问题与圆形边框的特殊渲染工件有关。

我将在这里留下原始答案，因为我仍然相信使用分层背景而不是边框​​是满足大多数此类要求的最佳解决方案。通过使用分层背景，您将使用一种经过验证的方法，该方法在标准 Java 8 modena.css 中的许多地方都使用过。此外，分层背景不会受到您在问题中指出的特定渲染工件的影响。

我的猜测是，当边界的所有四个边都被指定时，与只请求渲染边界的三个边(例如，可能有一个本地调用四个方面和三个独立的本地调用三个方面)。这当然是我的假设。继续这个假设，我猜测对所有四个边的单个调用会导致 1 个像素的外部边界线轻微溢出到下一个内部像素，导致整个外部边界的非常浅的阴影颜色的抗锯齿。但是，当您对边框的三个边使用请求时，生成的图形基元调用不会导致外边框出现锯齿。

我要发表的一个评论是，在视网膜 MacBook 显示器上查看时，(我的) native 眼睛看不到边框的锯齿伪影。为了看到这个神器，我需要使用绘图程序对屏幕进行快照并放大 10 倍。所以对于大多数应用程序(如果是我的话)，我不会担心这种轻微的渲染工件。如果您愿意，您可以 log a bug report在此让开发人员对其进行研究，以防在圆形边框的渲染解决方案中存在小的计算舍入错误或类似问题。

解决此问题的一种方法是指定两个分层边框而不是一个。让一个边界层渲染边界的三个边，另一个边界层渲染最后一个边，这不会导致渲染伪影。

例如，使用渲染工件:

TextField aliasedTextField = new TextField();
aliasedTextField.setStyle(
        "-fx-border-width: 1;\n" +
        "-fx-border-radius: 5;\n" +
        "-fx-border-color: #0000ff;\n" +
        "-fx-background-color: #ffffff;"
);

没有渲染工件:

TextField unaliasedTextField = new TextField();
unaliasedTextField.setStyle(
        "-fx-border-width: 0 1 1 1, 1 0 0 0;\n" +
        "-fx-border-radius: 5, 5;\n" +
        "-fx-border-color: #0000ff, #0000ff;\n" +
        "-fx-background-color: #ffffff;"
);

原答案

标准 .text-input背景在 Java 8 modena.css 中定义为:

-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);

这定义了多个阴影线性渐变层，第一层是控件的外边界，第二层是控件的内部背景。第二行，指定控件内部背景的前 5 个像素逐渐着色为比控件内部背景的其余部分略暗。

我认为这是您在问题中称为“内阴影”的线性渐变(请注意，实现是渐变，而不是内阴影效果)。

您可以重新定义默认样式以删除线性渐变，例如如下:

-fx-background-color: -fx-text-box-border, -fx-control-inner-background;

下面的第一个文本字段具有标准渐变样式，第二个文本字段删除了线性渐变。线性渐变效果非常微妙。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TextFieldShadows extends Application {
    @Override
    public void start(final Stage stage) throws Exception {
        TextField standardTextField = new TextField();
        TextField styledTextField = new TextField();
        styledTextField.setStyle(
                "-fx-background-color: -fx-text-box-border, -fx-control-inner-background;"
        );

        VBox layout = new VBox(10, standardTextField, styledTextField);
        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) throws Exception {
        launch(args);
    }
}

这个答案的其余部分可能会让你有点困惑，但是......另请参阅有关焦点颜色的相关讨论:
-fx-faint-focus-color looked-up color , 在 default Java 8 modena.css file. 中定义.

默认值是这样的:

-fx-faint-focus-color: #039ED322;

通过为 .root 重新定义它，在您的自定义样式表中覆盖它选择器:

.root {
    -fx-faint-focus-color: transparent;
}

也可以看看:

How do I remove the default border glow of a JavaFX button (when selected)?

如果您希望为您的控件自定义背景渐变样式，那么最好的方法是通过一个外部 CSS 样式表，该样式表为标准未聚焦控件和 :focused 伪样式定义背景样式，否则您可能会以奇怪的行为，例如聚焦环没有按预期为您的控件显示(您可能会在我上面提供的简单示例代码中找到)。