CSS JavaFX 条形图的线性渐变

Question

我当前的样式模式是（{0} 替换为条形码特定颜色代码）

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,-30%)) "
+ "(100%, derive(-fx-bar-fill,-40%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,80%)) "
+ "(100%, derive(-fx-bar-fill, 0%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,30%)) "
+ "(100%, derive(-fx-bar-fill,-10%));"
+ "-fx-background-insets: 0,1,2;"
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;";

看起来像这样：

问题是由于 linear 语法已弃用，我收到了解析器警告。我试图在不使用 guide 更改结果的情况下将样式模式重构为 linear-gradient，但我不明白。谁能解决这个问题？

Answer 1

弃用版本定义了三种背景。每个背景都以 linear 开头。这些背景像图层一样工作。所以我唯一要做的就是也创建三个背景。我的第一个解决方案将背景与 ;这会导致解析错误。背景必须用逗号分隔。条形的边界是通过使用 -fx-background-insets 缩小绘图区域创建的。我的最终解决方案是

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg1
+ "derive(-fx-bar-fill, -30%), derive(-fx-bar-fill, -40%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg2
+ "derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg3
+ "derive(-fx-bar-fill, 30%), derive(-fx-bar-fill, -10%));"
+ "-fx-background-insets: 0,1,2;" // reducing drawing area for each bg
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;"

CSS JavaFX 条形图的线性渐变

CSS linear-gradient of JavaFX barchart

css

java

javafx

linear-gradients

bar-chart