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

【问题标题】：JavaFX Circle Linear Gradient Fill by PercentageJavaFX圆形线性渐变填充百分比
【发布时间】：2021-10-24 11:09:02
【问题描述】：

我只想使用两个圆圈和线性渐变为客户制作一个指标，表明他/她使用了他/她的数据/短信/语音，但有些值的行为不符合预期。如何使它们的行为与左侧图像中的相同？

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

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);
}

【问题讨论】：

“某些值的行为不符合预期”。你可以说得更详细点吗？哪些价值观？他们的表现如何？您希望他们如何表现？

标签： java javafx linear-gradients

【解决方案1】：

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

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% "。

【讨论】：