JavaFX中Circle使用百分比线性渐变填充异常如何解决

核心问题说明 #

你当前代码的渐变参数设置存在两个错误，导致显示效果不符合预期：

1. 绿色、红色的分界点用了两个不同的数值，导致两个颜色中间出现过渡渐变，不是参考图里的硬边界效果
2. 颜色排布和占比的对应逻辑错误，显示的使用比例和实际数值不匹配
3. 用整数计算百分比会丢失精度，小数值场景下显示误差明显

修复后代码 #

private void createCircleBar(int x, int y, int usedAmount, int remainingAmount) {
    int totalAmount = usedAmount + remainingAmount;
    // 规避总数值为0的异常
    if (totalAmount <= 0) {
        totalAmount = 1;
    }
    // 改用浮点计算保留百分比精度
    double usedPercent = 100.0 * usedAmount / totalAmount;
    Circle outerCircle = new Circle(x, y, 50);
    // 统一两个颜色的分界点，红色对应底部已用区域，绿色对应顶部剩余区域
    LinearGradient g = LinearGradient.valueOf("from 0.0% 100.0% to 0.0% 0.0% rgb(148,0,0) 0.0%, rgb(148,0,0) " + usedPercent + "%, rgb(14,170,0) " + usedPercent + "%, rgb(14,170,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);
}

补充优化建议 #

如果需要适配暗色背景，可以给内圈Circle加一个和外圈同色系的细边框，避免白色内圈和背景融合的问题。

内容的提问来源于stack exchange，提问作者RiotThanos