JavaFx：滑块-带颜色的双向移动

背景：

我试图在JavaFx的TableView中创建实时股票运动的可视化表示，如所附的两幅图像（绿色表示正，琥珀色表示负&左底日低点的值，右底日高点的值）。移动将由实时数据流控制。因此，如果幻灯片标记的打开值变小，则需要能够在颜色变化的情况下双向滑动

研究：

我总是提到这个奇妙的->但在这种情况下寻求指导，因为我不确定它是否与进度条或滑块的可行性

任何关于这一点的建议都可以实现，我们将不胜感激

---

一种可能的解决方案是将两个

ProgressBar

s打包到

HBox

中
以下内容不应被视为全面实施，而应被视为理念的证明：

import javafx.application.Application;
import javafx.beans.binding.DoubleBinding;
import javafx.beans.binding.When;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.concurrent.Task;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import src.tests.BiDiProgressBar.Indicator;

public class BiDiProgressBar extends Application {

    @Override public void start(Stage stage) {

        final HBox indicator = new Indicator(60);
        stage.setScene(new Scene(indicator));
        stage.show();

        //run test
        Thread th = new Thread(new TestTask((Indicator)indicator));
        th.setDaemon(true);
        th.start();
    }


    class Indicator extends HBox{

        //properties representing indicator min max, mid and current values
        DoubleProperty minValue = new SimpleDoubleProperty(0);
        DoubleProperty maxValue = new SimpleDoubleProperty(100);
        DoubleProperty nominalValue = new SimpleDoubleProperty(50);
        DoubleProperty currentlValue;

        //properties representing full, neg and pos ranges
        DoubleProperty rangeValue = new SimpleDoubleProperty();
        DoubleProperty posRangeValue = new SimpleDoubleProperty();
        DoubleProperty negRangeValue = new SimpleDoubleProperty();

        private ProgressBar negProgBar, posProgBar;
        private static final double indicatorWidth = 200; //in pixles

        Indicator(double nomlValue){

            super(0);
            setNominalValue(nomlValue);
            rangeValue.bind(maxValue.subtract(minValue));
            negRangeValue.bind(nominalValue.subtract(minValue));
            posRangeValue.bind(rangeValue.subtract(negRangeValue));
            currentlValue = new SimpleDoubleProperty(nominalValue.get());

            negProgBar = new ProgressBar();
            negProgBar.rotateProperty().set(180); //rotate to progress from left to right

            posProgBar = new ProgressBar();
            setProgBarWidth();
            setProgBarValue();
            getChildren().addAll(negProgBar, posProgBar);

            getStylesheets().add(getClass().getResource("css/indicator.css").toExternalForm());
            negProgBar.getStyleClass().add("neg-bar");
            posProgBar.getStyleClass().add("pos-bar");
        }

        private void setNominalValue(double nominalValue) {
            nominalValue = withInRange(nominalValue);
            this.nominalValue.set(nominalValue);
        }

        private void setProgBarWidth() {
            double width = (indicatorWidth * nominalValue.get())/rangeValue.get();
            negProgBar.setPrefWidth(width);
            posProgBar.setPrefWidth(indicatorWidth-width);
        }

        private void setProgBarValue() {

            final DoubleBinding posBinding = new When(currentlValue.greaterThan(nominalValue))
                        .then((currentlValue.subtract(nominalValue)).divide(posRangeValue))
                        .otherwise(0.);
            final DoubleBinding negBinding = new When(currentlValue.lessThan(nominalValue))
                    .then((nominalValue.subtract(currentlValue)).divide(negRangeValue))
                    .otherwise(0.);
            posProgBar.progressProperty().bind(posBinding);
            negProgBar.progressProperty().bind(negBinding);
        }

        private double withInRange(double value) {
            value = (value < minValue.get()) ? minValue.get() : value;
            value = (value > maxValue.get()) ? maxValue.get() : value;
            return value ;
        }

        public double getMin() {return minValue.get();}

        public double getMax() {return maxValue.get();}

        public double getNominal() {return nominalValue.get();}

        public void setProgress(double value) {
            currentlValue.set(withInRange(value));
        }
    }

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

class TestTask extends Task<Void>{

    private Indicator indicator;
    public TestTask(Indicator indicator) {
        this.indicator = indicator;
    }

    @Override
    protected Void call() throws Exception {

        for(double value = indicator.getNominal();
                value < (indicator.getMax() +5) ; //exceed max
                value++)    {
            indicator.setProgress(value);
            delay(100);
        }

        for(double value = indicator.getMax();
                value > (indicator.getMin() -5 ) ;  value--)    {
            indicator.setProgress(value);
            delay(100);
        }

        return null;
    }

    private void delay(long millis) {

        try {
            Thread.sleep(millis);
        } catch (InterruptedException ex) { ex.printStackTrace();   }
    }
}

---

你可以用一个滑动条或者进度条，用CSS来改变轨迹的背景颜色。对于进度条，只需使进度条透明即可

基本思想是使用线性“梯度”。如果起始值为

x%

，当前值为

y%

，则使用

y>x

，需要在

(default 0%, default x%, green x%, green y%, default y%, default 100%)

其中，

default

是默认的背景色。（类似地，红色代替绿色，如果

y

，则切换

y

）

这里有一个SSCCE：

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BidirectionalSlider extends Application {

    @Override
    public void start(Stage primaryStage) {
        double startingValue = 0.5 ;
        Slider slider = new Slider(0, 1, startingValue);

        slider.styleProperty().bind(Bindings.createStringBinding(() -> {

            double min = slider.getMin();
            double max = slider.getMax();
            double value = slider.getValue() ;

            return createSliderStyle(startingValue, min, max, value);

        }, slider.valueProperty()));

        ProgressBar progressBar1 = new ProgressBar(0.1);
        ProgressBar progressBar2 = new ProgressBar(0.9);

        progressBar1.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar1.getProgress()), 
            progressBar1.progressProperty()));

        progressBar2.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar2.getProgress()), 
            progressBar2.progressProperty()));

        VBox root = new VBox(5, slider, progressBar1, progressBar2);
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private String createSliderStyle(double startingValue, double min, double max, double value) {
        StringBuilder gradient = new StringBuilder("-slider-track-color: ");
        String defaultBG = "derive(-fx-control-inner-background, -5%) " ;
        gradient.append("linear-gradient(to right, ").append(defaultBG).append("0%, ") ;

        double valuePercent = 100.0 * (value - min) / (max - min);

        double startingValuePercent = startingValue * 100.0;


        if (valuePercent > startingValuePercent) {
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append("green ").append(startingValuePercent).append("%, ");
            gradient.append("green ").append(valuePercent).append("%, ");
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");
        } else {
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append("red ").append(valuePercent).append("%, ");
            gradient.append("red ").append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");               
        }
        return gradient.toString() ;
    }

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

以及基本CSS文件（

style.CSS

）：

.slider，.进度条{
-滑块轨迹颜色：衍生（-fx控件内部背景，-5%）；
}
.slider.track、.progress bar.track{
-fx背景色：
-fx阴影高光颜色，
线性渐变（到底部，衍生（-fx文本框边框，-10%），-fx文本框边框），
-滑块轨迹颜色；
}
.进度条.进度条{
-背景色：透明；
}

---

不确定您是否可以通过

ProgressBar

实现这一点，但我确信您可以使用

Line

shape自己制作一个。我认为您可能只需使用一个滑块就可以做到这一点。使用带有线性渐变的CSS（类似于透明0%、透明x%、绿色x%、绿色y%、透明y%、透明100%）。对CSS使用内联样式，并在值更改时更新。如果您确实喜欢进度条，您可以对进度条的轨迹使用相同的CSS技巧（0.0表示

min

，1.0表示

max

，进度表示

value

），只需使进度条本身透明即可。先生，谢谢。更喜欢滑块方法。澄清一下，是否可以将滑块中的圆圈更改为我最初发布的图片中所示的泪滴？找到显示如何更改图标图片的链接-

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BidirectionalSlider extends Application {

    @Override
    public void start(Stage primaryStage) {
        double startingValue = 0.5 ;
        Slider slider = new Slider(0, 1, startingValue);

        slider.styleProperty().bind(Bindings.createStringBinding(() -> {

            double min = slider.getMin();
            double max = slider.getMax();
            double value = slider.getValue() ;

            return createSliderStyle(startingValue, min, max, value);

        }, slider.valueProperty()));

        ProgressBar progressBar1 = new ProgressBar(0.1);
        ProgressBar progressBar2 = new ProgressBar(0.9);

        progressBar1.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar1.getProgress()), 
            progressBar1.progressProperty()));

        progressBar2.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar2.getProgress()), 
            progressBar2.progressProperty()));

        VBox root = new VBox(5, slider, progressBar1, progressBar2);
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private String createSliderStyle(double startingValue, double min, double max, double value) {
        StringBuilder gradient = new StringBuilder("-slider-track-color: ");
        String defaultBG = "derive(-fx-control-inner-background, -5%) " ;
        gradient.append("linear-gradient(to right, ").append(defaultBG).append("0%, ") ;

        double valuePercent = 100.0 * (value - min) / (max - min);

        double startingValuePercent = startingValue * 100.0;


        if (valuePercent > startingValuePercent) {
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append("green ").append(startingValuePercent).append("%, ");
            gradient.append("green ").append(valuePercent).append("%, ");
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");
        } else {
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append("red ").append(valuePercent).append("%, ");
            gradient.append("red ").append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");               
        }
        return gradient.toString() ;
    }

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