原文链接：DOC-03-25 颜色选择器(Color Picker) | JavaFX中文资料
ColorPicker控件，提供了它的设计概述，并且说明了如何在你的JavaFX应用程序中使用它。
JavaFX SDK中的ColorPicker控件是一种典型的用户界面组件，它允许用户在一个可用范围内选择一个特定的颜色，或者通过指定RGB或HSB的组合值来设置一种新的颜色
设计概述
ColorPicker控件由颜色选择器，调色板和自定义颜色对话框窗体组成
ColorPicker控件的元素
另一种定义一个新颜色的办法就是设置HSB (色相/饱和度/亮度)或RGB (红/绿/蓝)值 ,也可以明确地输入网页颜色值到对应的文本框中
用户也可以通过移动Opacity滑块或者输入0到100之间的值来设置自定义颜色的透明度。在完成了所有的设置并且新颜色被指定完毕后，用户可以点击Use按钮来应用它，或者点击Save按钮将新的颜色保存到自定义颜色区域
使用ColorPicker
使用JavaFX SDK中的ColorPicker类来在JavaFX应用程序中创建一个ColorPicker。你可以直接添加一个ColorPicker到应用程序的scene中，或者布局容器中，或者应用程序工具栏中
创建ColorPicker对象的方法
//空构造函数，控件默认显示为白色
ColorPicker colorPicker1 = new ColorPicker();
//当前选择颜色参数为Color实例
ColorPicker colorPicker2 = new ColorPicker(Color.BLUE);
//当前选中颜色参数为网页颜色
ColorPicker colorPicker3 = new ColorPicker(Color.web("#ffcce6"));
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("试一试颜色选择器");//创建文本对象
text.setFont(Font.font ("Verdana", 20));//文本对象字体大小设置
text.setFill(colorPicker.getValue());//文本对象颜色填充，文本对象颜色设置为颜色选择器对象所选的颜色
colorPicker.setOnAction((ActionEvent t) -> {//颜色选择器组件交互事件处理回调函数
text.setFill(colorPicker.getValue());//设置文本对象的颜色填充为颜色选择器对应选择的当前颜色值
});
box.getChildren().addAll(colorPicker, text);//水平盒子对象上添加颜色选择器对象和文本对象
stage.setScene(scene);//舞台对象
stage.show();//舞台展现
}
}
此样例创建了一个ColorPicker，并定义了其颜色变化时的行为。通过ColorPicker类的getValue()方法获得的Color对象值被传递给Text对象的setFill()方法。这就是如何将选中的颜色应用到”Try the color picker!”文本之上的过程
——————————————————————
可以将选中的颜色应用到图形Node类型对象上
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
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 ColorPickerTest extends Application {
ImageView logo = new ImageView(
new Image(getClass().getResourceAsStream("background1.jpg"))
);//创建并加载一个图片掉图片视图区域对象logo中
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);//创建场景对象挂载垂直布局盒子对象
VBox box = (VBox) scene.getRoot(); //获取场景对象上的垂直盒子布局对象
ToolBar tb = new ToolBar();//创建工具栏对象
box.getChildren().add(tb);//垂直盒子布局对象中添加工具栏ToolBar对象
final ComboBox logoSamples = new ComboBox();//创建ComboBox类型对象
logoSamples.getItems().addAll(
"图片1",
"图片2",
"图片3",
"图片4");
logoSamples.setValue("图片1");//设置ComboBox类型对象目前选择值为图片1
logoSamples.valueProperty().addListener(new ChangeListener<String>() {//ComboBox类型对象选项交互事件监听器对的创建于添加
@Override
public void changed(ObservableValue ov, String t, String t1) {//ComboBox类型对象事件改变处理函数
logo.setImage(
new Image(getClass().getResourceAsStream("inbox_16.png"))
);//将指定图片Image类型对象加载到图片视图区域对象logo中
}
});
final ColorPicker colorPicker = new ColorPicker();//创建一个颜色选择器对象
tb.getItems().addAll(logoSamples, colorPicker);//将ToolBar工具栏类型对象上添加ComboBox类型对象和ColorPicker颜色选择器对象
StackPane stack = new StackPane();//创建一个栈式面板布局对象
box.getChildren().add(stack);//布局盒子对象上添加一个栈式面板布局对象
final SVGPath svg = new SVGPath();//创建一个划线路径型SVG类型矢量图形
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((ActionEvent t) -> {
svg.setFill(colorPicker.getValue());//颜色选择器对象的交互事件处理回调函数，将svg矢量图形填充颜色为颜色选择器对象所选择的颜色
});
stage.setScene(scene);//舞台对象上设置场景对象
stage.show();//舞台对象的展示与展现
}
}
在这个样例中，在Color Picker中被选择的颜色通过使用getValue()方法被获取到，并且被应用到了SVGPath对象上
当你使用Color Picker时，你可以通过getCustomColors()方法获取已创建的自定义颜色，它会返回一个包含Color对象的ObservableList，这些Color对象与被创建的颜色对应。你无法在应用程序启动时将它们设置到ColorPicker中。然而你可以将某个自定义颜色设置为ColorPicker的选中颜色值
获取自定义颜色
| 1 2 | ObservableList<Color>customColors = colorPicker.getCustomColors(); colorPicker.setValue(customColors.get(index)); |
改变Color Picker的外观
Color Picker控件的默认外观是由com.sun.javafx.scene.control.skin.ColorPickerSkin类定义的。为了在你的JavaFX应用程序中给ColorPicker定义其它可选皮肤，你可以重新定义color-picker CSS样式类中的-fx-skin属性，如例25-5所示。
为ColorPicker设置一个新皮肤
| 1 2 3 | .color-picker { -fx-skin: "CustomSkin"; } |
在JavaFX代码中使用split-button和arrow-button CSS样式类来修改ColorPicker控件的外观
设置ColorPicker的外观
| 1 2 3 4 5 | //设置split-menu-button colorPicker.getStyleClass().add("split-button"); //设置button colorPicker.getStyleClass().add("button"); |
你也可以通过使用modena样式表中定义的各种CSS样式类来修改ColorPicker的默认风格并自定义它的各个元素。在JavaFX SDK安装目录下的\rt\lib\ext目录中可以看到此文件。使用下面的命令将样式表从JAR文件中提取出来：jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css。请查看”在JavaFX应用中使用CSS样式来管理外观”了解更多关于CSS样式类和属性的信息。修改ColorPicker的默认背景和标签。
修改ColorPicker的默认外观
| 1 2 3 4 5 6 7 8 | .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。Color Picker外观应该产生如图所示的改变。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
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 ColorPickerTest extends Application {
ImageView logo = new ImageView(
new Image(getClass().getResourceAsStream("background1.jpg"))
);//创建并加载一个图片掉图片视图区域对象logo中
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);//创建场景对象挂载垂直布局盒子对象
VBox box = (VBox) scene.getRoot(); //获取场景对象上的垂直盒子布局对象
ToolBar tb = new ToolBar();//创建工具栏对象
box.getChildren().add(tb);//垂直盒子布局对象中添加工具栏ToolBar对象
final ComboBox logoSamples = new ComboBox();//创建ComboBox类型对象
logoSamples.getItems().addAll(
"图片1",
"图片2",
"图片3",
"图片4");
logoSamples.setValue("图片1");//设置ComboBox类型对象目前选择值为图片1
logoSamples.valueProperty().addListener(new ChangeListener<String>() {//ComboBox类型对象选项交互事件监听器对的创建于添加
@Override
public void changed(ObservableValue ov, String t, String t1) {//ComboBox类型对象事件改变处理函数
logo.setImage(
new Image(getClass().getResourceAsStream("inbox_16.png"))
);//将指定图片Image类型对象加载到图片视图区域对象logo中
}
});
final ColorPicker colorPicker = new ColorPicker();//创建一个颜色选择器对象
tb.getItems().addAll(logoSamples, colorPicker);//将ToolBar工具栏类型对象上添加ComboBox类型对象和ColorPicker颜色选择器对象
StackPane stack = new StackPane();//创建一个栈式面板布局对象
box.getChildren().add(stack);//布局盒子对象上添加一个栈式面板布局对象
final SVGPath svg = new SVGPath();//创建一个划线路径型SVG类型矢量图形
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((ActionEvent t) -> {
svg.setFill(colorPicker.getValue());//颜色选择器对象的交互事件处理回调函数，将svg矢量图形填充颜色为颜色选择器对象所选择的颜色
});
scene.getStylesheets().add("/controlStyle.css");
stage.setScene(scene);//舞台对象上设置场景对象
stage.show();//舞台对象的展示与展现
}
}
被修改了外观的Color Picker
————————————————————————
请注意ColorPicker类是ComboBoxBase类的一个扩展类并且继承了它的CSS属性。你可以定义新的combo-box-base样式来统一在ColorPickerSample应用程序中ComboBox和ColorPicker的外观。样式替换ControlStyle.css文件中的样式。
设置Combo-Box-Base样式
| 1 2 3 4 5 6 7 8 9 10 11 | .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应用程序时，ComboBox和ColorPicker的外观将如图所示。
统一样式的ComboBox和ColorPicker
扫一扫
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
