翻譯自??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);}@Overridepublic 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);}@Overridepublic 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文檔?

• ColorPicker

• ComboBoxBase

總結

以上是生活随笔為你收集整理的JavaFX UI控件教程（二十五）之Color Picker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。