我正在使用JavaFX和Scene Builder在应用程序中实现某些功能
我可以在单击JFoenix拾色器时选择一种颜色,然后该颜色将应用于我的标签背景
我使JFOenix拾色器看起来像一个图标。我已将“拾色器”的标准外观更改为我的图像
问题1: 第一次启动程序时,拾色器完全充满了白色,然后将鼠标移到它上面时,它看起来像我的图标。
问题2:当我单击带有拾色器的图标时,波纹效果可以工作,但是当我单击拾色器时,不需要任何波纹效果或动画
问题3:JFoenix拾色器还将所选颜色应用于其自身的背景,当我再次将鼠标移到其上方时,它再次出现在图标图像上
问题4: 将颜色选择器放置在堆栈窗格中时,仅当我单击图标左侧时才会出现“颜色选择器”对话框窗口,看起来像“颜色选择器”图标的右侧已禁用,但是我需要在单击时显示“颜色选择器”对话框窗口到“颜色选择器”图标的任何部分
我正在搜索JFoniex拾色器的CSS文件,但是没有任何文档说明如何在CSS中正确自定义拾色器。
请,请帮助我
*我有个想法使用切换按钮(我知道如何根据自己的需要对其进行自定义),然后将“拾色器”向后放置此切换按钮并使不透明度变为0。但是我不知道如何制作“拾色器”对话框窗口打开当我单击切换按钮时。有什么想法吗?
我使用单击“颜色选择器”以用颜色填充标签背景时调用的方法。
控制器类:
@FXML private Label category1;
@FXML private JFXColorPicker colorPickerCategory;
@FXML
void changeCategoryColor(ActionEvent event) {
Color selectedColor = colorPickerCategory.getValue();
category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));
}
CSS:
.jfx-color-picker .color-box {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
.jfx-color-picker:armed,
.jfx-color-picker:hover,
.jfx-color-picker:focused,
.jfx-color-picker {
-fx-background-color: transparent, transparent, transparent, transparent;
-fx-background-insets: 0px;
}
.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
-fx-stroke: null;
-fx-fill : null;
}
.color-picker {
-fx-background-color: transparent;
-fx-color-label-visible: false;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment: center;
}
.color-picker .color-picker-label .text {
-fx-fill: transparent;
}
.jfx-color-picker:default{
-fx-background-color: transparent;
}
答案 0 :(得分:2)
JFXColorPicker
的皮肤类包含一个窗格和一个标签,它们分别具有样式类color-label
和color-box
。标签包含在窗格中。
以下css
显示图标无背景(=选定的颜色)和无文本(=选定颜色的十六进制值)
.jfx-color-picker {
-fx-focus-traversable: false;
-fx-color-label-visible: false;
}
.jfx-color-picker .color-label {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
.jfx-color-picker .color-box {
visibility: hidden;
}
第一部分禁用文本。中间部分负责图标的显示。最后一部分禁用背景。
有了css
,观察到的问题就不会发生:
StackPane
s中没有问题我的测试用例包含一个BorderPane
,该StackPane
的中心是一个StackPane
。 JFXColorPicker
包含BorderPane
和3个按钮。 css
的右侧包含一个窗格,该窗格的颜色由拾色器控制。
下图显示了Scenebuilder中的FXML(图1),刚启动后的应用程序(图2),单击颜色选择器后的应用程序(图3)和颜色更改后的应用程序(图4)。 ):
图。 1:
图。 2:
图。 3:
图。 4:
以下.jfx-color-picker {
-fx-focus-traversable: false;
-fx-color-label-visible: false;
}
.jfx-color-picker .color-label {
-fx-background-image: url("resources/palette.png");
-fx-background-color: transparent;
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-size: contain;
}
显示的图标有背景(=选择的颜色)和具有波纹,但没有文本(=十六进制)所选颜色的值)
public void disableRipple() {
JFXRippler rippler = (JFXRippler) jfxColorPicker.lookup("JFXRippler");
rippler.setDisable(true);
}
下图显示了颜色更改后的应用程序。
图。 5:
为了显示带有背景的图标 (=选定的颜色),但没有波纹和没有文本(=选定的十六进制值)颜色), 必须将以下方法添加到控制器中:
jfxColorPicker
其中main
表示FXML中的颜色选择器。
该方法必须在执行show
方法之后的FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>"));
...
primaryStage.show();
...
Controller controller = loader.getController();
controller.disableRipple();
方法 中调用:
JFXColorPicker
JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java
的皮肤类别位于if (_.size(_.values(_.omit(this.user, 'language')).filter(Boolean)) < 2)
。
在这里可以研究控件的交互作用。
答案 1 :(得分:0)
编辑: @Topaco在上面编写了解决方案,但我以其他方式解决了我的问题:我制作了切换按钮,其样式看起来像一个图标。我在该切换按钮上方放置了JFOenix拾色器,并使Color PIcker的不透明度为0。看起来我单击带图标的切换按钮,但实际上我单击了拾色器,因为它位于切换按钮上方。
JFoenix拾色器未包装在任何窗格中。它仅作为切换按钮的堆栈窗格放置在“网格窗格”中。拾色器向前进。切换按钮向后放置