2. 程式人生 > >JavaFX UI控制元件教程（二十五）之Color Picker

JavaFX UI控制元件教程（二十五）之Color Picker

阿新 • • 發佈：2018-11-10

翻譯自  Color Picker

本章介紹ColorPicker控制元件，提供其設計概述，並說明如何在JavaFX應用程式中使用它。

JavaFX SDK中的顏色選擇器控制元件是一個典型的使用者介面元件，使使用者可以從可用範圍中選擇特定顏色，或通過指定RGB或HSB組合來設定其他顏色。

設計概述

該ColorPicker控制由顏色選擇，調色盤和自定義顏色對話方塊視窗。圖24-1顯示了這些元素。

圖24-1顏色選擇器控制元件的元素



顏色選擇器

顏色選擇器的顏色選擇器元素是組合框，其中啟用了顏色指示器，並且相應的標籤顯示在圖24-1

的頂部。顏色指示器顯示當前選擇的顏色。

顏色選擇器控制元件的實現允許顏色選擇器元素的三個外觀：按鈕，分割選單按鈕和組合框，如圖24-2所示。

圖24-2顏色選擇器的檢視

按鈕外觀提供帶有顏色指示器和標籤的典型按鈕控制元件。在分割選單按鈕外觀中，控制元件的按鈕部分與下拉選單分開。組合框外觀是顏色選擇器的預設外觀。它還有一個下拉選單，但它沒有與按鈕部分分開。

要應用其中一個外觀，請使用相應的CSS類。有關如何更改顏色選擇器外觀的詳細資訊，請參閱更改顏色選擇器的外觀。

調色盤

調色盤包含預定義的顏色集和指向“自定義顏色”對話方塊視窗的“自定義顏色”連結。調色盤的初始外觀如圖24-3

所示。

圖24-3調色盤的初始外觀

如果已定義自定義顏色，則此顏色將顯示在調色盤的“自定義顏色”區域中，如圖24-4所示。

圖24-4帶自定義顏色區域的調色盤

調色盤支援使用向上，向下，向左和向右鍵進行導航。

除非在應用程式中儲存，否則無法在應用程式再次啟動時重新載入自定義顏色集。在調色盤或自定義顏色區域中選擇的每種顏色都顯示在顏色選擇器的顏色指示器中。顏色選擇器標籤呈現相應的十六進位制Web顏色值。

自定義顏色對話視窗

“自定義顏色”對話方塊視窗是一個模態視窗，可以通過單擊調色盤中的相應連結來開啟該視窗。開啟“自定義顏色”視窗時，它將顯示當前在顏色選擇器的顏色指示器中顯示的顏色值。使用者可以通過將滑鼠游標移動到顏色區域或垂直顏色條

上來定義新顏色，如圖24-5所示。請注意，只要使用者使用顏色區域中的圓或顏色條中的矩形進行操作，顏色值就會自動分配給ColorPicker控制元件的相應屬性。

圖24-5“自定義顏色”對話方塊視窗

定義新顏色的另一種方法是設定HSB（色調飽和度亮度）或RGB（紅綠藍）值，或在相應欄位中明確輸入Web顏色值。圖24-6顯示了自定義顏色設定的三個窗格。

圖24-6“自定義顏色”對話方塊視窗中的顏色設定窗格

使用者還可以通過移動“不透明度”滑塊或鍵入0到100之間的值來設定自定義顏色的透明度。

完成所有設定並指定新顏色後，使用者可以單擊“使用”進行應用，或單擊“儲存”將顏色儲存到自定義顏色區域。

使用拾色器

使用ColorPickerJavaFX SDK 的類在JavaFX應用程式中構建顏色選擇器。您可以將顏色選擇器直接新增到應用程式場景，佈局容器或應用程式工具欄。例24-1顯示了三種宣告ColorPicker物件的方法。

示例24-1建立顏色選擇器控制元件

//Empty contructor, the control appears with the default color, which is WHITE
ColorPicker colorPicker1 = new ColorPicker();
//Color constant set as the currently selected color
ColorPicker colorPicker2 = new ColorPicker(Color.BLUE);
//Web color value set as the currently selected color
ColorPicker colorPicker3 = new ColorPicker(Color.web("#ffcce6"));

嘗試示例24-2中顯示的示例來評估ColorPicker控制元件的執行情況。

示例24-2使用ColorPicker控制元件更改文字元件的顏色

import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.geometry.Insets;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.*;
import javafx.stage.Stage;
 
public class ColorPickerSample extends Application {    
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        stage.setTitle("ColorPicker");
        Scene scene = new Scene(new HBox(20), 400, 100);
        HBox box = (HBox) scene.getRoot();
        box.setPadding(new Insets(5, 5, 5, 5));          
             
        final ColorPicker colorPicker = new ColorPicker();
        colorPicker.setValue(Color.CORAL);
        
        final Text text = new Text("Try the color picker!");
        text.setFont(Font.font ("Verdana", 20));
        text.setFill(colorPicker.getValue());
        
        colorPicker.setOnAction(new EventHandler() {
            public void handle(Event t) {
                text.setFill(colorPicker.getValue());               
            }
        });
 
        box.getChildren().addAll(colorPicker, text);
 
        stage.setScene(scene);
        stage.show();
    }
}

此示例建立顏色選擇器，並在顏色更改時定義其行為。Color通過類的getValue方法獲得的值ColorPicker被傳遞給物件的setFill方法Text。這就是所選顏色應用於“嘗試顏色選擇器！”的方式。文字。

編譯並執行此示例時，它會生成如圖24-7所示的輸出。該圖捕獲了新建立的自定義顏色應用於Text元件的時刻。

圖24-7 ColorPicker和文字元件

同樣，您可以將所選顏色應用於圖形Node。例24-3顯示瞭如何使用顏色選擇器來模擬T恤。

示例24-3使用ColorPicker更改圖形物件的顏色

import javafx.application.Application;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.control.ComboBox;
import javafx.scene.control.ToolBar;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;
 
public class ColorPickerSample extends Application {
      
    ImageView logo = new ImageView(
        new Image(getClass().getResourceAsStream("OracleLogo.png"))
    );
    
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        stage.setTitle("ColorPicker");
 
        Scene scene = new Scene(new VBox(20), 300, 300);
        scene.setFill(Color.web("#ccffcc"));
        VBox box = (VBox) scene.getRoot();
 
        ToolBar tb = new ToolBar();
        box.getChildren().add(tb);
 
        final ComboBox logoSamples = new ComboBox();
        logoSamples.getItems().addAll(
                "Oracle",
                "Java",
                "JavaFX",
                "Cup");
        logoSamples.setValue("Oracle");

        logoSamples.valueProperty().addListener(new ChangeListener<String>() {
            @Override 
            public void changed(ObservableValue ov, String t, String t1) {                
                logo.setImage(
                    new Image(getClass().getResourceAsStream(t1+"Logo.png"))
                );                  
            }    
        });
        
 
        final ColorPicker colorPicker = new ColorPicker();
        tb.getItems().addAll(logoSamples, colorPicker);
 
        StackPane stack = new StackPane();
        box.getChildren().add(stack);
 
        final SVGPath svg = new SVGPath();
        svg.setContent("M70,50 L90,50 L120,90 L150,50 L170,50"
            + "L210,90 L180,120 L170,110 L170,200 L70,200 L70,110 L60,120 L30,90"
            + "L70,50");
        svg.setStroke(Color.DARKGREY);
        svg.setStrokeWidth(2);
        svg.setEffect(new DropShadow());
        svg.setFill(colorPicker.getValue());
        stack.getChildren().addAll(svg, logo);
 
        colorPicker.setOnAction(new EventHandler() {
            public void handle(Event t) {
                svg.setFill(colorPicker.getValue());                    
            }
        });
 
        stage.setScene(scene);
        stage.show();
    }
}

在該示例中，在顏色選擇器中選擇並通過該getValue方法獲得的顏色被應用於SVGPath物件。此示例生成如圖24-8所示的輸出

圖24-8 ColorPickerSample應用程式

使用顏色選擇器時，可以通過呼叫getCustomColors()方法獲取建立的自定義顏色。它返回一個ObservableList所述的Color對應於所建立的顏色的物件。您無法在應用程式啟動時將它們上載到顏色選擇器。但是，您可以將其中一種自定義顏色設定為ColorPicker值（如例24-4所示）。

示例24-4獲取自定義顏色

ObservableList<Color> customColors = colorPicker.getCustomColors();
colorPicker.setValue(customColors.get(index));

更改拾色器的外觀

顏色選擇器控制元件的預設外觀由com.sun.javafx.scene.control.skin.ColorPickerSkin類定義。要將替代外觀應用於JavaFX應用程式中的顏色選擇器，請重新定義CSS類的-fx-skin屬性，color-picker如例24-5所示。

示例24-5為拾色器設定備用外觀

.color-picker {
    -fx-skin: "CustomSkin";
}

使用split-button和arrow-buttonCSS類更改JavaFX程式碼中顏色選擇器控制元件的外觀，如例24-6所示。

示例24-6設定拾色器的外觀

//Sets the split-menu-button
colorPicker.getStyleClass().add("split-button");
//Sets the button
colorPicker.getStyleClass().add("button");

您還可以修改顏色選擇器的預設樣式，並使用caspian樣式表中定義的各種CSS類自定義其元素。要檢視此檔案，請轉到\rt\lib安裝JavaFX SDK 的目錄下的目錄。使用以下命令從JAR檔案中提取樣式表：jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css。有關CSS類和屬性的更多資訊，請參閱使用CSS對JavaFX應用程式進行外觀處理。例24-7顯示瞭如何更改顏色選擇器的預設背景和標籤。

示例24-7修改顏色選擇器的預設外觀

.color-picker {
    -fx-background-color: #669999; 
    -fx-background-radius: 0 15 15 0; 
}
.color-picker .color-picker-label .text {
    -fx-fill: #ccffcc;
}

將這些樣式新增到ControlStyle.css檔案中，並使用以下程式碼行在JavaFX應用程式中啟用樣式表：scene.getStylesheets().add("colorpickersample/ControlStyle.css");，然後編譯並執行ColorPickerSample。顏色選擇器應改變其外觀，如圖24-9所示。

圖24-9顏色選擇器的修改外觀

請注意，ColorPicker該類是類的擴充套件，ComboBoxBase並繼承其CSS屬性。您可以為combo-box-baseCSS樣式定義新樣式，以統一ColorPickerSample應用程式中的組合框和顏色選擇器。使用示例24-8中顯示的樣式替換ControlStyle.css檔案中的樣式。

示例24-8設定組合框基礎樣式

.tool-bar:horizontal {
    -fx-background-color: #b3e6b3;
}
 
.combo-box-base  {
    -fx-background-color: null;  
}
 
.combo-box-base:hover  {
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}

使用應用的樣式編譯和執行ColorPickerSample應用程式時，組合框和顏色選擇器的外觀如圖24-10所示。

圖24-10組合框和拾色器的統一樣式

 

相關的API文件 

相關推薦

JavaFX UI控制元件教程（二十五）之Color Picker

翻譯自  Color Picker 本章介紹ColorPicker控制元件，提供其設計概述，並說明如何在JavaFX應用程式中使用它。 JavaFX SDK中的顏色選擇器控制元件是一個典型的使用者介面元件，使使用者可以從可用範圍中選擇特定顏色，或通過指定RGB或HSB組合

JavaFX UI控制元件教程（二十四）之Password Field

翻譯自  Password Field 在本章中，您將瞭解另一種型別的文字控制元件，即密碼欄位。 本PasswordField類實現一個專門的文字欄位。通過顯示回顯字串來隱藏使用者鍵入的字元。圖23-1顯示了一個密碼欄位，其中包含提示訊息。 圖23-1帶有提示訊

JavaFX UI控制元件教程（二十一）之Tooltip

翻譯自  Tooltip 在本章中，您將瞭解工具提示，即當滑鼠游標懸停該控制元件時，可以為任何UI控制元件設定的控制元件。 的Tooltip類表示通常用於顯示關於所述使用者介面的控制附加資訊的公共UI元件。可以通過呼叫setTooltip方法在任何控制元件上設定工具提示。

JavaFX UI控制元件教程（二十七）之File Chooser

翻譯自  File Chooser 本章介紹如何使用FileChooser該類使使用者能夠導航檔案系統。本章提供的示例說明了如何開啟一個或多個檔案，配置檔案選擇器對話方塊視窗以及儲存應用程式內容。 與其他使用者介面元件類不同，FileChooser該類不屬於該javafx

JavaFX UI控制元件教程（二十六）之Pagination Control

翻譯自  Pagination Control 本章介紹如何向JavaFX應用程式新增分頁控制元件。它教授如何嚮應用程式新增分頁控制元件，管理其頁面項，以及使用CSS樣式設定控制元件元素的樣式。 分頁控制元件，用於瀏覽分成較小部分的多頁內容。典型用途包括瀏覽郵箱中的電子郵

JavaFX UI控制元件教程（二十八）之UI控制元件的自定義

翻譯自  Customization of UI Controls 本章介紹了UI控制元件自定義的各個方面，並總結了Oracle提供的一些提示和技巧，以幫助您修改UI控制元件的外觀和行為。 您可以通過應用層疊樣式表（CSS），重新定義預設行為和使用單元工廠來學習如何從UI

JavaFX UI控制元件教程（二十）之HTML Editor

翻譯自  HTML Editor 在本章中，您將學習如何使用嵌入式HTML編輯器編輯JavaFX應用程式中的文字。 該HTMLEditor控制元件是一個功能齊全的富文字編輯器。它的實現基於HTML5的文件編輯功能，包括以下編輯功能： 文字格式包括粗體，斜體，下

JavaFX UI控制元件教程（二十二）之Titled Pane和Accordion

翻譯自  Titled Pane and Accordion 本章介紹如何在JavaFX應用程式中使用accordion和title窗格的組合。 標題窗格是帶標題的面板。它可以開啟和關閉，它可以封裝任何Node諸如UI控制元件或影象以及新增到佈局容器的元素組。 標題窗

JavaFX UI控制元件教程（二十三）之Menu

翻譯自  Menu 本章介紹如何建立選單和選單欄，新增選單項，將選單分組，建立子選單以及設定上下文選單。 您可以使用以下JavaFX API類在JavaFX應用程式中構建選單。 選單欄 選單項 選單 CheckMen

JavaFX UI控制元件教程（十五）之Combo Box

翻譯自   Combo Box 本章介紹如何在JavaFX應用程式中使用組合框。它討論了可編輯和不可編輯的組合框，教您如何跟蹤可編輯組合框中的更改並處理它們上的事件，並解釋如何使用單元工廠來更改組合框的預設實現。 組合框是使用者介面的典型元素，使使用者可以選擇多個選項之一

JavaFX UI控制元件教程（十九）之Hyperlink

翻譯自   Hyperlink 本章介紹Hyperlink用於將文字格式化為超連結的控制元件。 所述Hyperlink類表示另一種型別的Labeled控制。圖18-1演示了預設超連結實現的三種狀態。 圖18-1超連結控制的三種狀態  

JavaFX UI控制元件教程（十八）之Progress Bar和Progress Indicator

翻譯自  Progress Bar and Progress Indicator 在本章中，您將瞭解進度指示器和進度條，以及視覺化JavaFX應用程式中任何操作進度的UI控制元件。 本ProgressIndicator類及其直接子類ProgressBar所提供的功能，以表

JavaFX UI控制元件教程（十七）之Slider

翻譯自   Slider 在本章中，您將學習如何在JavaFX應用程式中使用滑塊來顯示和與一系列數值進行互動。 該Slider控制元件由一個軌道和一個可拖動的拇指組成。它還可以包括刻度線和刻度標籤，用於指示範圍的數值。圖16-1顯示了一個典型的滑塊並指出了它的主要元素。

JavaFX UI控制元件教程（十六）之Separator

翻譯自  Separator 本章介紹如何使用分隔符組織JavaFX應用程式的UI元件。 SeparatorJavaFX API中可用的類表示水平或垂直分隔線。它用於劃分應用程式使用者介面的元素，不會產生任何操作。但是，您可以設定樣式，對其應用視覺效果，甚至為其設定動畫。

JavaFX UI控制元件教程（六）之Toggle Button

在本章中，您將瞭解ToggleButton該類，這是通過JavaFX API提供的另一種型別的按鈕。 可以將兩個或多個切換按鈕組合成一個組，其中一次只能選擇一個按鈕，或者不需要選擇。圖5-1是組合了三個切換按鈕的應用程式的截圖。應用程式根據選擇的切換按鈕繪製具有特定顏色

JavaFX UI控制元件教程（五）之Radio Button

本章討論單選按鈕控制元件和RadioButton類，該類的一個專門實現ToggleButton。 可以選擇或取消選擇單選按鈕控制元件。通常，單選按鈕組合成一個組，其中一次只能選擇一個按鈕。此行為將它們與切換按鈕區分開來，因為組中的所有切換按鈕都可以處於取消選擇狀態。

JavaFX UI控制元件教程（四）之Button

Button通過JavaFX API提供的類使開發人員能夠在使用者單擊按鈕時處理操作。該Button班是的擴充套件Labeled類。它可以顯示文字，影象或兩者。圖3-1顯示了具有各種效果的按鈕。在本章中，您將學習如何建立這些按鈕型別。 圖3-1按鈕型別

Vue.js框架--Ui框架的Element UI 按需引入（二十五）

主要操作技能：  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component，我們可以只引入需要的元件，以達到減小專案體積的目的

WPF教程（二十五）WrapPanel

WrapPanel用於一個接一個的排列子控制元件，以水平或者垂直方向，當空間不足時就會自動切換到下一行。適合於需要水平或者垂直排列控制元件且能自動換行的情況。 水平方向排列時，每一行所有子控制元件的高度都被統一成固定的值，這個值由最高的那個決定；每一列垂直方向排列時，所有子

史上最簡單的 MySQL 教程（二十五）「外來鍵」

外來鍵外來鍵：foreign key，外面的鍵，即不在自己表中的鍵。如果一張表中有一個非主鍵的欄位指向另外一張表的主鍵，那麼將該欄位稱之為外來鍵。每張表中，可以有多個外來鍵。新增外來鍵外來鍵既可以在建立表的時候增加，也可以在建立表之後增加（但是要考慮資料的問題）。第 1 種：在建立表的時候，增加外來鍵基本語法