如何在JavaFX中爲按鈕創建帶半透明背景的圓角邊框？

Question

我想在JavaFX（不是html）中創建像這樣的按鈕。

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

（懸停在他們看到效果）

[愚蠢的＃1我堅持在這裏發帖的jsfiddle代碼是不相關]採用了圓角邊框 <li><a href="/help/2/">Button 1</a></li>

所以和透明的背景。不幸的是，背景/插頁技術似乎覆蓋了從外部到內部的內容。因此，如果您繪製明亮的邊框，則無法撤消亮度以創建透明背景，而不對其顏色進行硬編碼。即它不是一次寫入，而是在不同的彩色面板上隨處運行。

-fx-border-color似乎不支持舍入或者至少不推薦這裏Set border size。我想象一下邊框的四捨五入與背景的四捨五入不同步。

似乎HTML5在這方面有優勢。告訴我我錯了:-) ...雖然我懷疑我的問題不能在沒有指定每個按鈕上下文的顏色的情況下完成。

布朗尼點。 請注意，我意識到我已將白色邊框塗成綠色（對上下文敏感），我很滿意半透明白色邊框作爲解決方案。一等獎將是ala photoshop的刻錄/閃避/等（背景色）功能。

B計劃。 它看起來並不那麼糟糕，不圓的邊緣，所以也許我應該訴諸-FX-邊框顏色

Answer 1

背景信息

看一看關於"looked-up colors"的css文檔中的信息（向下滾動一點，超出指定的顏色部分）。

這些基本的工作方式，是你可以定義一個「擡起頭彩」（即顏色值的變量），並將其應用到場景圖中的節點。該值由場景圖中該節點的任何後繼節點繼承。

現在可以通過默認的樣式表，modena.css一個瀏覽。這種方式的作用是幾乎所有東西都是按照查找顏色的很短的列表來定義的。結果是，只需在場景的根部重新定義這些顏色，您就可以輕鬆「主題化」應用程序。嘗試添加這個樣式表來你最喜歡的JavaFX應用程序：

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

正如您所觀察到的，-fx-border根本沒有被默認樣式表中使用;相反，通過定義「嵌套」的背景顏色來實現邊框，這些背景顏色基本上是矩形填充，彼此重疊。這顯然更有效率（根據我的理解，非常相當）。所以你正確的做法是讓兩個背景的內部透明，只顯示「外部」邊框的顏色，而不是背景的顏色。

如何實現你在找什麼

窗格默認爲查找到的顏色-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%) ; 
}