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

翻译自  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文档 

• ColorPicker

• ComboBoxBase