时间戳

首页 > 解决方案 > JavaFX圆形线性渐变填充百分比

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

问题描述

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

在此处输入图像描述

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

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

标签： javajavafxlinear-gradients

解决方案

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

ALinearGradient将在您指定的任何“色标”之间插入颜色。因此，要在两种颜色之间产生硬变化，您需要在同一位置设置两个色标，其中一种颜色变为另一种颜色。

以下内容为您提供了我认为您正在寻找的内容：

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

推荐阅读