JavaFX 圆形线性渐变按百分比填充

Question

我只想使用两个圆圈和线性渐变为客户指示 he/she 使用了多少 his/hers data/sms/voice，但有些值的表现并不理想。我怎样才能使它们的行为与左图中的一样？

这是我用来创建渐变的代码：

private void createCircleBar(int x, int y, int usedAmount, int remainingAmount) {
    int totalAmount = usedAmount + remainingAmount;
    int percentage = 100*usedAmount/totalAmount;
    Circle outerCircle = new Circle(x,y,50);
    LinearGradient g = LinearGradient.valueOf("from 0.0% 100.0% to 0.0% 0.0% rgb(14,170,0) 0.0%, rgb(14,170,0) "+(100-percentage)+"%, rgb(148,0,0) "+percentage+"%,rgb(148,0,0) 100.0%");
    outerCircle.setFill(g);
    anchor.getChildren().add(outerCircle);
    Circle innerCircle = new Circle(x,y,39);
    innerCircle.setFill(Color.WHITE);
    anchor.getChildren().add(innerCircle);
}

Answer 1

我认为您想要做的是从顶部开始使用红色 rgb(148,0,0)，向下延伸由 percentage 确定的量，然后是绿色 rgb(14, 170, 0)从那一点到底部，两种颜色之间没有实际的颜色渐变。

A LinearGradient 将在您指定的任何“色标”之间插入颜色。因此，要在两种颜色之间创建硬变化，您需要在同一位置有两个色标，一种颜色变为另一种颜色。

以下是我认为您正在寻找的内容：

LinearGradient g = LinearGradient.valueOf(
    "from 0.0% 0.0% to 0.0% 100.0% "+    // from top to bottom
    "rgb(148, 0, 0) 0%, "+               // red at the top
    "rgb(148, 0, 0) "+percentage+"%, "+  // red at percentage
    "rgb(14, 147, 0) "+percentage+"%, "+ // green at percentage
    "rgb(14, 147, 0) 100%"               // green at the bottom
);

请注意，您可以直接使用 "from top to bottom " 而不是 "from 0% 0% to 0% 100% "。

JavaFX 圆形线性渐变按百分比填充

JavaFX Circle Linear Gradient Fill by Percentage

java

javafx

linear-gradients