如何根据滑块上拇指当前位置的颜色来改变JFXSlider拇指的颜色? [英] How can I change the color of a JFXSlider's thumb according to the color of the slider at the current position of the thumb on the slider?

问题描述

我在JavaFX中使用了JFXSlider，并且对JFXSlider的轨道颜色(使用CSS)使用了线性渐变.但是，我也想将拇指的颜色更改为该位置的滑块的颜色.我已将以下CSS用于滑块的线性渐变并摆脱了JFXSlider的默认绿色:

I'm using a JFXSlider in JavaFX and I've used a linear gradient for the color of the JFXSlider's track (with CSS). However, I'd also like to change the color of the thumb to that of the slider for that position. I've used the following CSS for the slider's linear gradient and for getting rid of the default green color of the JFXSlider:

.jfx-slider .track {
    -fx-pref-height: 10;
    -fx-background-color: linear-gradient(to right,red,orange);
}
.jfx-slider .colored-track {
    -fx-background-color: transparent;
}

我尝试了以下CSS代码，以使拇指颜色与当前位置的滑块的颜色相同，但不起作用.

I tried the following CSS code to get the thumb color to be the same as that of the slider at the current position, but it didn't work.

.jfx-slider .thumb {
    -fx-background-color: linear-gradient(to right,red,orange);
}

我想我尝试的代码可能只为拇指的背景色提供了一个内部线性渐变.有谁知道如何解决这个问题? P.S.我正在使用JFoenix 9.0.10，JavaFX 15和JDK 15.

I guess it's probably that the code I tried only provides an internal linear gradient for the thumb's background color. Does anyone know how to solve this problem? P.S. I'm using JFoenix 9.0.10, JavaFX 15, and JDK 15.

推荐答案

一种可能的解决方案是添加一个全局CSS变量并根据JFXSlider当前值对其进行更改.例如:

One possible solution would be to add a global CSS variable and change it depending on the JFXSlider current value. For example :

.root {
    -fx-custom-color : red;
}

然后在jfx-slider css规则上使用此变量:

And then use this variable on your jfx-slider css rules like :

/* Styling the slider thumb */
.jfx-slider>.thumb {
    -fx-background-color: -fx-custom-color;
}

/* Styling the animated thumb */
.jfx-slider>.animated-thumb {
    -fx-background-color: -fx-custom-color;
}

此后，您需要弄清楚如何更新"-fx-custom-color"文件.变量，以及如何确定需要为Slider(或位置)的特定值设置的颜色.

After that, you need to figure out how to update the "-fx-custom-color" variable and how to determine which color you need to set for the specific value of the Slider (or rather location).

首先，您应该在value属性中添加一个侦听器以侦听值更改.其次，使用Color类的插值方法确定颜色，最后，使用内联CSS样式将-fx-custom-color的新值更新为JFXSlider.

First, you should add a listener to the value property to listen for value changes. Second, use the interpolate method of the Color class to determine the color, and finally, update the new value for the -fx-custom-color using inline CSS style to the JFXSlider.

这是一个完整的示例:

import com.jfoenix.controls.JFXSlider;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SliderTesting extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        JFXSlider slider = new JFXSlider(0, 100, 0);

        slider.valueProperty().addListener(e -> {
            Color imageColor = Color.RED.interpolate(Color.ORANGE,
                    slider.getValue() / 100);
            slider.setStyle("-fx-custom-color : " + colorToHex(imageColor) + ";");
        });

        VBox box = new VBox(slider);
        box.setPadding(new Insets(20));
        box.setPrefSize(400, 400);
        box.setAlignment(Pos.CENTER);

        Scene scene = new Scene(box);
        scene.getStylesheets()
                .add(this.getClass().getResource("custom-jfoenix.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static String colorToHex(Color color) {
        return String.format("#%02X%02X%02X", (int) (color.getRed() * 255),
                (int) (color.getGreen() * 255), (int) (color.getBlue() * 255));
    }
}

和"custom-jfoenix.css"文件

And the "custom-jfoenix.css" file

.root {
    -fx-custom-color : red;
}

/* Styling the slider track */
.jfx-slider>.track {
    -fx-pref-height: 10;
}

/* Styling the slider thumb */
.jfx-slider>.thumb {
    -fx-background-color: -fx-custom-color;
}

/* Styling the filled track */
.jfx-slider>.colored-track {
    -fx-background-color: linear-gradient(to right, red, orange);
}

/* Styling the animated thumb */
.jfx-slider>.animated-thumb {
    -fx-background-color: -fx-custom-color;
}

结果:

这篇关于如何根据滑块上拇指当前位置的颜色来改变JFXSlider拇指的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！