JavaFX - 更改滑块特定刻度的颜色答案

【问题标题】：JavaFX - Changing the colour of a sliders specific tickJavaFX - 更改滑块特定刻度的颜色
【发布时间】：2018-08-12 00:39:02
【问题描述】：

所以我要在我的 gui 应用程序中添加一个密码生成器，我想添加一个滑块来选择密码的安全程度。我可以更改所有刻度的颜色，但我希望第一个刻度为红色，第二个刻度为黄色，最后一个刻度为绿色。这是用于更改所有主要刻度颜色的 css 代码。（取自Changing the colour of slider ticks）

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke: red;
}

【问题讨论】：

我认为不可能。除非你实现了自己的 Slider 控件。

标签： java css javafx slider

【解决方案1】：

首先，让我们按照您的建议创建一个滑块，其中包含三个主要刻度：

@Override
public void start(Stage primaryStage) {
    Slider slider = new Slider(0, 10, 5);
    slider.setMajorTickUnit(5);
    slider.setMinorTickCount(0);
    slider.setShowTickMarks(true);
    slider.setSnapToTicks(true);
    StackPane root = new StackPane(slider);
    root.getStyleClass().add("pane");
    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

其中style.css 包含：

.pane {
    -fx-background-color: #dcdcdc;
    -fx-padding: 10;
}

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke: red;
}

现在让我们检查一下轴刻度线是如何创建的以及它们是什么类型的节点。为此，您可以选择以下任一选项：

看看源代码
使用查找
使用ScenicView

此时lookup 更快。显示阶段后添加调用：

primaryStage.show();

System.out.println("Axis-Tick-Mark: " + slider.lookup(".axis-tick-mark"));

它会打印出来：

Axis-Tick-Mark: Path[elements=[MoveTo[x=0.0, y=0.0], LineTo[x=0.0, y=5.0], MoveTo[x=132.0, y=0.0], LineTo[x=132.0, y=5.0], MoveTo[x=264.0, y=0.0], LineTo[x=264.0, y=5.0]], fill=null, fillRule=NON_ZERO, stroke=0xff0000ff, strokeWidth=1.0]

你去，轴刻度线是Path，一个单一的节点。这意味着您无法获得任何线条并对其进行不同的样式设置。

但是，如果您使用渐变修改 stroke 属性，没有什么能阻止您将路径设置为一个整体。

所以让我们根据你的颜色添加一个线性渐变：

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke-width: 2;
    -fx-stroke: linear-gradient(to right, red, yellow, green);
}

这将按预期工作：

显然，您可以将其扩展到不同的设置（超过三个刻度）、垂直方向、更多或不同的颜色...

【讨论】：

非常感谢
哇！漂亮的答案。