Question

我想在JavaFX（不是html）中创建这样的按钮。

http://jsfiddle.net/x7dRU/3/

（将鼠标悬停在其上以查看效果）

[Stupid Stackoverflow坚持要我在这里发布jsfiddle代码，这是不相关的] <li><a href="/help/2/">Button 1</a></li＆GT;

因此具有圆形边框和透明背景。不幸的是，背景/插入技术似乎覆盖了从外到内的内容。因此，如果你绘制一个明亮的边框，那么你无法撤消亮度来创建一个黑暗和透明的背景而不需要对颜色进行硬编码。即在不同颜色的面板上，它不会写一次，到处运行。

-fx-border-color似乎不支持舍入，或者至少不推荐Set border size。我想边界的四舍五入不会与背景的四舍五入同步。

似乎HTML5在这一方面具有优势。告诉我我错了:-) ...虽然我怀疑如果没有为每个按钮上下文指定颜色，我的问题就无法完成。

布朗尼点。 注意，我意识到我已将白色边框涂成绿色（上下文敏感），我很满意半透明白色边框作为解决方案。一等奖将是一个刻录/闪避/等（背景色）功能ala photoshop。

计划B。 没有圆形边缘，它看起来不那么糟糕，所以也许我应该求助于-fx-border-color

Answer 1

背景信息

查看"looked-up colors"上css文档中的信息（向下滚动一点，超出指定的颜色部分）。

这些基本上起作用的方式是，你可以定义一个＆＃34;查找颜色＆＃34; （即颜色值变量）并将其应用于场景图中的节点。该值由场景图中该节点的任何节点继承。

现在浏览默认样式表modena.css。它的工作方式是几乎所有东西都是根据一个非常短的查找颜色列表来定义的。结果是你可以很容易地＆＃34;主题＆＃34;您的应用程序只需在场景的根目录上重新定义这些颜色即可。尝试将此样式表添加到您喜欢的JavaFX应用程序中：

.root {
    -fx-base: #c7dec7;
    -fx-accent: #00c996 ;
    -fx-default-button: #abedd8 ;
    -fx-focus-color: #03d39e;
    -fx-faint-focus-color: #03d39e22;
}

正如您所观察到的，默认样式表中根本没有使用-fx-border;而是通过定义＆＃34;嵌套＆＃34;来实现边界。背景颜色基本上是矩形填充物彼此叠加。这显然更有效率（根据我的理解，非常相当）。所以你是正确的，使两个背景的内部透明将简单地揭示＆＃34;外部＆＃34;边框颜色，而不是背景颜色。

如何实现您的目标

窗格的背景默认为查找颜色-fx-background，而后者默认为-fx-base的较轻版本。因此，如果您通过更改-fx-background或-fx-base来改变包含按钮的窗格的颜色，那么您可以通过将其背景设置为

来使按钮显示为透明

-fx-background-color: (some-border-color), -fx-background ;

按钮的默认边框包含三个值; -fx-shadow-highlight，-fx-outer-border和-fx-inner-border。您可以单独覆盖这些值，也可以根据需要重新定义背景颜色。

在这个例子中你想要的近似值：你可以搞乱边界厚度的精确值（来自第二个-fx-background-insets值）和角落的半径来得到它你需要的。如果你想使用它，可以使用梯子和渐变的组合。

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


public class StyledButtonExample extends Application {

    private int currentColorIndex = 0 ;
    private final String[] baseColors = new String[] {"#8ec919", "#bfe7ff", "#e6e6fa",
            "#ffcfaf", "#fff7f7", "#3f474f"};

    private StackPane root ;

    @Override
    public void start(Stage primaryStage) {

        root = new StackPane();
        Button button = new Button("Change colors");
        button.setOnAction(event -> changeColors());
        root.getChildren().add(button);
        Scene scene = new Scene(root,400,400);
        scene.getStylesheets().add(getClass().getResource("transparent-button.css").toExternalForm());
        root.setStyle("-fx-base: "+baseColors[0]+";");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void changeColors() {
        currentColorIndex = (currentColorIndex + 1) % baseColors.length ;
        root.setStyle("-fx-base: "+baseColors[currentColorIndex]+";");
    }

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

透明button.css：

.button {
    -fx-background-color: derive(-fx-base, 60%), -fx-background ; 
    -fx-background-insets: 0, 1px ;
    -fx-background-radius: 4px, 0 ;
}
 .button:hover {
    -fx-background-color: #fff, derive(-fx-background, -5%) ;
}

如何在JavaFX中为按钮创建半透明背景的圆角边框？

1 个答案: