DOC-03-25 颜色选择器(Color Picker)

本章介绍了ColorPicker控件,提供了它的设计概述,并且说明了如何在你的JavaFX应用程序中使用它。

JavaFX SDK中的Color Picker控件是一种典型的用户界面组件,它允许用户在一个可用范围内选择一个特定的颜色,或者通过指定RGB或HSB的组合值来设置一种新的颜色。

设计概述

ColorPicker控件由颜色选择器,调色板和自定义颜色对话框窗体组成。图25-1显示了这些元素。

25-1 Color Picker控件的元素

3-25-1 color-picker

颜色选择器

Color Picker中的颜色选择器元素是一个Combo Box,它带有颜色指示器和对应的标签,如图25-1顶部的内容所示。颜色指示器显示了当前被选中的颜色。

在Color Picker控件的实现中,允许三种颜色选择器的外观:按钮、分隔菜单按钮和下拉列表,如图25-2所示。

25-2 颜色选择器的多种外观

3-25-2 color-chooser

按钮外观提供了一种典型的带有颜色指示器和标签的按钮。分隔菜单按钮外观中的按钮部分和下拉菜单部分被分隔开了。下拉列表外观是颜色选择器的默认外观,它也有一个下拉菜单,但是没有和按钮部分隔开。

如果要应用其中某种外观,可以使用对应的CSS类。关于修改Color Picker外观的更多信息请见后续的“改变Color Picker的外观”章节。

调色板

调色板包含了预定义的颜色集和指向自定义颜色对话框窗体的自定义颜色(Custom Color)链接。调色板的初始外观如图25-3所示。

25-3 调色板的初始外观

3-25-3 color-pallete1

如果一个自定义颜色已经被定义了,那么这个颜色会显示在调色板的自定义颜色区域,如图25-4所示。

25-4 调色板的自定义颜色区域

3-25-4 color-pallete2

调色板支持使用上、下、左、右按键来进行导航选择。

当应用程序重新启动时,自定义颜色集不会被重新加载进来,除非它们在应用程序中进行了保存。在调色板或者自定义颜色区域中被选中的每种颜色都会显示在颜色选择器的颜色指示器中。颜色选择器的标签也会显示对应的十六进制的网页颜色值。

自定义颜色对话框窗体

自定义颜色对话框窗体是一个模态窗口,它可以通过点击调色板中相应的链接打开。当自定义颜色窗体打开后,它显示着当前颜色选择器中颜色指示器对应的颜色。用户可以通过在颜色区域上移动鼠标或者移动垂直颜色条来定义一个新颜色,如图25-5所示。注意,无论何时用户调整了颜色区域的圆圈位置或颜色条上的矩形位置,对应的颜色值均会自动地被指定到ColorPicker控件对应的属性上。

25-5 自定义颜色对话框窗体

3-25-5 custom-color1

另一种定义一个新颜色的办法就是设置HSB (色相/饱和度/亮度)或RGB (红/绿/蓝)值,也可以明确地输入网页颜色值到对应的文本框中。图25-6显示了设置自定义颜色的三个面板。

25-6 自定义颜色对话框窗体中的颜色设置面板

3-25-6 custom-color2

用户也可以通过移动Opacity滑块或者输入0到100之间的值来设置自定义颜色的透明度。

在完成了所有的设置并且新颜色被指定完毕后,用户可以点击Use按钮来应用它,或者点击Save按钮将新的颜色保存到自定义颜色区域。

使用Color Picker

使用JavaFX SDK中的ColorPicker类来在JavaFX应用程序中创建一个Color Picker。你可以直接添加一个Color Picker到应用程序的scene中,或者布局容器中,或者应用程序工具栏中。例25-1展示了三种创建ColorPicker对象的方法。

25-1 创建Color Picker控件

尝试运行例25-2中的代码来体验一下ColorPicker控件。

25-2 使用ColorPicker控件来修改文本组件的颜色

此样例创建了一个Color Picker,并定义了其颜色变化时的行为。通过ColorPicker类的getValue()方法获得的Color值被传递给Text对象的setFill()方法。这就是如何将选中的颜色应用到”Try the color picker!”文本之上的过程。

编译和运行此样例,其产生的输出结果如图25-7所示。图中显示了一个新创建的自定义颜色被应用到文本组件时的截图。

25-7 ColorPicker和文本组件

3-25-7 color-text

与此类似,你可以将选中的颜色应用到图形Node上。例25-3展示了如何使用Color Picker来装饰一件T恤衫图片。

25-3 使用ColorPicker来改变一个图形对象的颜色

在这个样例中,在Color Picker中被选择的颜色通过使用getValue()方法被获取到,并且被应用到了SVGPath对象上。该样例的运行结果如图25-8所示。

25-8 ColorPickerSample应用程序

3-25-8 color-t-shirt1

当你使用Color Picker时,你可以通过getCustomColors()方法获取已创建的自定义颜色,它会返回一个包含Color对象的ObservableList,这些Color对象与被创建的颜色对应。你无法在应用程序启动时将它们设置到Color Picker中。然而你可以将某个自定义颜色设置为ColorPicker的选中颜色值(如例25-4所示)。

25-4 获取自定义颜色

改变Color Picker的外观

Color Picker控件的默认外观是由com.sun.javafx.scene.control.skin.ColorPickerSkin类定义的。为了在你的JavaFX应用程序中给Color Picker定义其它可选皮肤,你可以重新定义color-picker CSS样式类中的-fx-skin属性,如例25-5所示。

25-5 Color Picker设置一个新皮肤

在JavaFX代码中使用split-button和arrow-button CSS样式类来修改Color Picker控件的外观,如例25-6所示。

25-6 设置Color Picker的外观

你也可以通过使用modena样式表中定义的各种CSS样式类来修改Color Picker的默认风格并自定义它的各个元素。在JavaFX SDK安装目录下的\rt\lib\ext目录中可以看到此文件。使用下面的命令将样式表从JAR文件中提取出来:jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css。请查看”在JavaFX应用中使用CSS样式来管理外观”章节来了解更多关于CSS样式类和属性的信息。例25-7展示了如何修改Color Picker的默认背景和标签。

25-7 修改Color Picker的默认外观

将这些样式添加到ControlStyle.css文件中,并通过以下代码行在JavaFX应用程序中启用样式表:scene.getStylesheets().add(“colorpickersample/ControlStyle.css”);,然后编译和运行ColorPickerSample。Color Picker外观应该产生如图25-9所示的改变。

25-9 被修改了外观的Color Picker

3-25-9 color-picker-css1

请注意ColorPicker类是ComboBoxBase类的一个扩展类并且继承了它的CSS属性。你可以定义新的combo-box-base样式来统一在ColorPickerSample应用程序中Combo Box和Color Picker的外观。使用例25-8中所示的样式替换ControlStyle.css文件中的样式。

25-8 设置Combo-Box-Base样式

当你编译和运行应用了新样式的ColorPickerSample应用程序时,Combo Box和Color Picker的外观将如图25-10所示。

25-10 统一样式的Combo BoxColor Picker

3-25-10 color-picker-css2

相关的API文档

· ColorPicker

· ComboBoxBase

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_colorpicker/
百度已收录