JavaFX Slider有两种不同的颜色，例如绿色表示所选区域，红色表示未选区域 [英] JavaFX Slider with 2 different colors , for example green for selected area and red for unselected area
本文介绍了JavaFX Slider有两种不同的颜色，例如绿色表示所选区域，红色表示未选区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要实现的是拥有如下所示的JavaFX Slider：
我希望所选的是绿色，未选择的区域是红色：
这可以通过让我们说简单的CSS来完成，因为JavaFX很棒我相信它可以但现在如何：_）
我在做什么直到....
到现在为止我只是添加一个StackPane，后面是一个ProgressBar，与Slider的值同步，我的意思是什么？ ：）
< a href =https://i.stack.imgur.com/CxBCX.jpg =nofollow noreferrer>
.fxml：
<？xml version =1.0encoding =UTF-8？>
<？import java.lang.String？>
<？import javafx.geometry.Insets？>
<？import javafx.scene.control.ProgressBar？>
<？import javafx.scene.control.Slider？>
<？import javafx.scene.layout.BorderPane？>
<？import javafx.scene.layout.HBox？>
<？import javafx.scene.layout.StackPane？>
< fx：root prefHeight =389.0prefWidth =228.0style = - fx-background-color：＃202020; stylesheets =@ .. / .. / style / application.csstype =StackPanexmlns：fx =http://javafx.com/fxml/1xmlns =http://javafx.com/javafx /9.0.1\">
< children>
< BorderPane fx：id =borderPaneminHeight =0.0minWidth =0.0>
< bottom>
< StackPane minHeight =0.0minWidth =0.0BorderPane.alignment =CENTER>
< children>
< HBox alignment =CENTERmaxHeight = - InfinityminHeight =0.0minWidth =0.0prefHeight =15.0>
< children>
< ProgressBar fx：id =volumeProgress1maxWidth =1.7976931348623157E308minHeight =0.0minWidth =0.0mouseTransparent =trueprefHeight =15.0progress =1.0HBox.hgrow = ALWAYS>
< styleClass>
< String fx：value =transparent-progress-bar/>
< String fx：value =transparent-volume-progress-bar2-nostrip/>
< / styleClass>
< / ProgressBar>
< ProgressBar fx：id =volumeProgress2layoutX =10.0layoutY =10.0maxWidth =1.7976931348623157E308minHeight =0.0minWidth =0.0mouseTransparent =trueprefHeight =15.0 progress =1.0HBox.hgrow =ALWAYS>
< styleClass>
< String fx：value =transparent-progress-bar/>
< String fx：value =transparent-volume-progress-bar3-nostrip/>
< / styleClass>
< / ProgressBar>
< / children>
< / HBox>
< Slider fx：id =masterVolumeSlidermajorTickUnit =15.0max =150.0maxWidth =1.7976931348623157E308minorTickCount =55value =75.0>
< styleClass>
< String fx：value =transparency-slider/>
< String fx：value =timer-slider/>
< / styleClass>
< / Slider>
< / children>
< BorderPane.margin>
< Insets left =5.0right =5.0/>
< /BorderPane.margin>
< / StackPane>
< / bottom>
< / BorderPane>
< / children>
< / fx：root>
.java
import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import main.java.com.goxr3plus.xr3player.application.tools.InfoTool;
公共类MixTabInterface扩展StackPane {
// -------------------------- ------------------------------------
@FXML
私人BorderPane borderPane;
@FXML
private ProgressBar volumeProgress1;
@FXML
private ProgressBar volumeProgress2;
@FXML
private Slider masterVolumeSlider;
// ---------------------------------------- ---------------------
/ **
*构造函数。
* /
public MixTabInterface（）{
// ------------------------- ----------- FXMLLOADER -------------------------------------- -
FXMLLoader loader = new FXMLLoader（getClass（）。getResource（InfoTool.PLAYERS_FXMLS +MixTabInterface.fxml））;
loader.setController（this）;
loader.setRoot（this）;
try {
loader.load（）;
} catch（IOException ex）{
ex.printStackTrace（）;
}
}
/ **
* fxml初始化后立即调用
* /
@FXML
private void initialize（）{
// masterVolumeSlider
masterVolumeSlider.boundsInLocalProperty（）。addListener（（observable，oldValue，newValue） - > calculateBars（））;
masterVolumeSlider.valueProperty（）。addListener（（observable，oldValue，newValue） - > {
calculateBars（）;
}）;
}
/ **
*计算定位条b $ b * /
private void calculateBars（）{
//变量
double value = masterVolumeSlider.getValue（）;
double half = masterVolumeSlider.getMax（）/ 2;
double masterVolumeSliderWidth = masterVolumeSlider.getWidth（）;
// Progress Max1
volumeProgress1.setProgress（1）;
volumeProgress2.setProgress（1）;
//以下是思维技巧
if（（int）value ==（int）half）{
volumeProgress1.setMinWidth（masterVolumeSliderWidth / 2）;
volumeProgress2.setMinWidth（masterVolumeSliderWidth / 2）;
}否则if（value< half）{
double progress = 1.0 - （value / half）;
double minimumWidth = masterVolumeSlider.getWidth（）/ 2 +（masterVolumeSlider.getWidth（）/ 2）*（进度）;
volumeProgress1.setMinWidth（masterVolumeSliderWidth - minimumWidth）;
volumeProgress1.setMaxWidth（masterVolumeSliderWidth - minimumWidth）;
volumeProgress2.setMinWidth（minimumWidth）;
}否则if（value> half）{
double progress =（value - half）/ half;
double minimumWidth = masterVolumeSlider.getWidth（）/ 2 +（masterVolumeSlider.getWidth（）/ 2）*（进度）;
volumeProgress1.setMinWidth（minimumWidth）;
volumeProgress2.setMinWidth（masterVolumeSliderWidth - minimumWidth）;
volumeProgress2.setMaxWidth（masterVolumeSliderWidth - minimumWidth）;
}
}
/ **
* @return borderPane
* /
public BorderPane getBorderPane（）{
返回borderPane;
}
/ **
* @return masterVolumeSlider
* /
public Slider getMasterVolumeSlider（）{
return masterVolumeSlider;
}
}
.css
.transparent-volume-progress-bar2-nostrip> .bar，.transparent-volume-progress-bar2-nostrip：indeterminate .bar，.transparent-volume-progress-bar2-nostrip：determinate .track，.transparent-volume-progress-bar2-nostrip：indeterminate .track {
-fx-accent：rgb（0.0,144.0,255.0）;
-fx-background-color：-fx-accent;
-fx-background-radius：0.0;
-fx-border-radius：0.0;
}
.transparent-volume-progress-bar3-nostrip> .bar，.transparent-volume-progress-bar3-nostrip：indeterminate .bar，.transparent-volume-progress-bar3-nostrip：determinate .track，.transparent-volume-progress-bar3-nostrip：indeterminate .track {
-fx-accent：＃fc4f4f;
-fx-background-color：-fx-accent;
-fx-background-radius：0.0;
-fx-border-radius：0.0;
}
.progress-bar> .bar {
-fx-accent：firebrick;
/ * - fx-background-color：firebrick; * /
-fx-background-color：线性渐变（
从0.0px 0.75em到0.75em 0.0px，
重复，
-fx-accent 0.0％，
-fx-accent 49.0％，
derive（-fx-accent，30.0％）50.0％，
derive（-fx -accent，30.0％）99.0％
）;
-fx-background-insets：3.0;
-fx-padding：0.2em;
}
.transparent-progress-bar：determinate .track，.transparent-progress-bar：indeterminate .track {
-fx-background-color：rgb（0.0， 0.0,0.0,0.5）;
}
/ * .transparent-progress-bar * /
.transparent-progress-bar> .bar，.transparent-progress-bar：indeterminate .bar {
-fx-accent：firebrick;
}
What i want to achieve is the have a JavaFX Slider like the below :
I want the selected are to be green and the unselected area to be red :
Can this be done with let's say simple css because JavaFX is awesome i am sure it can but now how :_)
What i was doing till ....
Until now i was just adding a StackPane and behind that a ProgressBar , synchronized with the value of the Slider , what i mean? :)
, but hey now i need two colors and i have to create two ProgressBars in a StackPane with different colors (RED and Green) .... to much code ...
解决方案
1 slider and 2 progress bars , I will post below the .fxml code , .java code and the needed .css for look and feel :)
Any question feel free to answer :)
As for the code , this is created for XR3Player (Open Source Github Project)
.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<fx:root prefHeight="389.0" prefWidth="228.0" style="-fx-background-color: #202020;" stylesheets="@../../style/application.css" type="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1">
<children>
<BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0">
<bottom>
<StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0">
<children>
<ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
<styleClass>
<String fx:value="transparent-progress-bar" />
<String fx:value="transparent-volume-progress-bar2-nostrip" />
</styleClass>
</ProgressBar>
<ProgressBar fx:id="volumeProgress2" layoutX="10.0" layoutY="10.0" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
<styleClass>
<String fx:value="transparent-progress-bar" />
<String fx:value="transparent-volume-progress-bar3-nostrip" />
</styleClass>
</ProgressBar>
</children>
</HBox>
<Slider fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0">
<styleClass>
<String fx:value="transparency-slider" />
<String fx:value="timer-slider" />
</styleClass>
</Slider>
</children>
<BorderPane.margin>
<Insets left="5.0" right="5.0" />
</BorderPane.margin>
</StackPane>
</bottom>
</BorderPane>
</children>
</fx:root>
.java
import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import main.java.com.goxr3plus.xr3player.application.tools.InfoTool;
public class MixTabInterface extends StackPane {
//--------------------------------------------------------------
@FXML
private BorderPane borderPane;
@FXML
private ProgressBar volumeProgress1;
@FXML
private ProgressBar volumeProgress2;
@FXML
private Slider masterVolumeSlider;
// -------------------------------------------------------------
/**
* Constructor.
*/
public MixTabInterface() {
// ------------------------------------FXMLLOADER ----------------------------------------
FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml"));
loader.setController(this);
loader.setRoot(this);
try {
loader.load();
} catch (IOException ex) {
ex.printStackTrace();
}
}
/**
* Called as soon as fxml is initialized
*/
@FXML
private void initialize() {
//masterVolumeSlider
masterVolumeSlider.boundsInLocalProperty().addListener((observable , oldValue , newValue) -> calculateBars());
masterVolumeSlider.valueProperty().addListener((observable , oldValue , newValue) -> {
calculateBars();
});
}
/**
* Calculate bars positioning
*/
private void calculateBars() {
//Variables
double value = masterVolumeSlider.getValue();
double half = masterVolumeSlider.getMax() / 2;
double masterVolumeSliderWidth = masterVolumeSlider.getWidth();
//Progress Max1
volumeProgress1.setProgress(1);
volumeProgress2.setProgress(1);
//Below is mind tricks
if ((int) value == (int) half) {
volumeProgress1.setMinWidth(masterVolumeSliderWidth / 2);
volumeProgress2.setMinWidth(masterVolumeSliderWidth / 2);
} else if (value < half) {
double progress = 1.0 - ( value / half );
double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress2.setMinWidth(minimumWidth);
} else if (value > half) {
double progress = ( value - half ) / half;
double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
volumeProgress1.setMinWidth(minimumWidth);
volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth);
volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
}
}
/**
* @return the borderPane
*/
public BorderPane getBorderPane() {
return borderPane;
}
/**
* @return the masterVolumeSlider
*/
public Slider getMasterVolumeSlider() {
return masterVolumeSlider;
}
}
.css
.transparent-volume-progress-bar2-nostrip > .bar,.transparent-volume-progress-bar2-nostrip:indeterminate .bar,.transparent-volume-progress-bar2-nostrip:determinate .track,.transparent-volume-progress-bar2-nostrip:indeterminate .track{
-fx-accent:rgb(0.0, 144.0, 255.0);
-fx-background-color: -fx-accent;
-fx-background-radius:0.0;
-fx-border-radius:0.0;
}
.transparent-volume-progress-bar3-nostrip > .bar,.transparent-volume-progress-bar3-nostrip:indeterminate .bar,.transparent-volume-progress-bar3-nostrip:determinate .track,.transparent-volume-progress-bar3-nostrip:indeterminate .track{
-fx-accent:#fc4f4f;
-fx-background-color: -fx-accent;
-fx-background-radius:0.0;
-fx-border-radius:0.0;
}
.progress-bar > .bar {
-fx-accent:firebrick;
/*-fx-background-color:firebrick;*/
-fx-background-color: linear-gradient(
from 0.0px 0.75em to 0.75em 0.0px,
repeat,
-fx-accent 0.0%,
-fx-accent 49.0%,
derive(-fx-accent, 30.0%) 50.0%,
derive(-fx-accent, 30.0%) 99.0%
);
-fx-background-insets: 3.0;
-fx-padding: 0.2em;
}
.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{
-fx-background-color:rgb(0.0,0.0,0.0,0.5);
}
/* .transparent-progress-bar */
.transparent-progress-bar > .bar,.transparent-progress-bar:indeterminate .bar{
-fx-accent:firebrick;
}
这篇关于JavaFX Slider有两种不同的颜色，例如绿色表示所选区域，红色表示未选区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
