Question

我使用Java8。我试图自定义javafx.scene.control.TextField。

这是我的CSS：

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

结果如下：

注意它有一些＆＃34; 3D效果＆＃34;或＆＃34;内部阴影＆＃34;。让我们仔细看看：

边框和背景之间有一些渐变，而我在CSS中指定了纯蓝色边框和白色背景。玩不同的颜色甚至多层背景并不能消除那些内在阴影＆＃34;影响。设置-fx-effect: null;不会产生任何效果。

有趣的是：当我使用少于4条边界线（或边界半径）时，这种效果＆＃34;自动化＆＃34;消失：

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

问题是：是什么原因导致内心阴影＆＃34;效果以及如何关闭它？我试图在modena.css和TextFieldSkin中找到答案，但一无所获。

PS。我可以使用一种解决方法：删除边框，并使用2层背景。但这很丑陋，在UI中打破了边框背景方法。

UPD

进一步调查给出了一些结果：

如CSS中所述绘制任何 ASYMMETRIC 控件，如-fx-border-width: 1 1 2 1;或-fx-border-radius: 4 4 4 5;。看起来像JavaFX逐行绘制它。
使用＆＃34;渐变效果＆＃34;绘制任何 SYMMETRIC 控件，如-fx-border-width: 1 1 1 1;或-fx-border-width: 1;（它是相同的）。渐变颜色和宽度取决于-fx-border-radius值。这让我想到了图像缩放和像素模糊。

引擎盖下发生了什么，是否有一些＆＃34;治愈＆＃34;对称控制？

Answer 1

更新

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

我会在这里留下原始答案，因为我仍然认为使用分层背景而不是边框是大多数这些要求的最佳解决方案。通过使用分层背景，您使用的是经过验证的方法，该方法在标准Java 8 modena.css中的许多位置使用。使用分层背景也不会受到您在问题中指出的特定渲染工件的影响。

我的猜测是，当指定边框的所有四个边时，对原生图形库内部进行不同的渲染图元调用，而不是仅请求渲染边框的三个边（例如，可能只有一个四方的本地召唤和三方的三个独立的本地召唤）。这当然是我的假设。继续这个假设我猜测所有四个边的单个调用会导致1像素外边界线轻微溢出到下一个内部像素中，从而导致整个外边界的非常浅的阴影颜色的抗锯齿。但是，当您对边框的三个边使用请求时，生成的图形基元调用不会导致外边框的别名。

我要做的一个评论是，当在视网膜MacBook显示器上观看时，（我的）原生眼睛看不到边框的锯齿伪像。要查看工件，我需要使用绘图程序对屏幕进行快照并放大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个像素逐渐变暗，比控件内部背景的其余部分稍暗。

我认为这是你所谓的线性渐变＆＃34;内阴影＆＃34;在您的问题中（请注意，实现是渐变，而不是内部阴影效果）。

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

-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样式表定义标准未聚焦控件和聚焦伪装样式的背景样式，否则您可能会最终会出现奇怪的行为，例如焦点环没有按照控件的预期显示（正如您在上面提供的简单示例代码中所见）。

删除JavaFX输入的内部阴影

1 个答案: