JavaFX中是否可实现按百分比截取使用linear gradient填充？

完全可以实现该需求，以下是两种原生可直接落地的实现方案：
#

方案1：动态生成裁剪后的渐变Brush #

线性渐变LinearGradient的核心是渐变停止点Stop序列，我们可以基于指定百分比对原有停止点做插值计算，生成仅包含前xx%渐变的新Brush。

工具方法代码 #

import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import java.util.ArrayList;
import java.util.List;

public class GradientCropUtil {
    /**
     * 裁剪线性渐变，返回仅包含前percentage%的渐变Brush
     * @param fullGradient 完整的原始渐变
     * @param percentage 要截取的百分比，取值范围0~100
     * @return 裁剪后的线性渐变
     */
    public static LinearGradient cropGradient(LinearGradient fullGradient, double percentage) {
        if (percentage <= 0) {
            // 0%返回渐变起始色
            return new LinearGradient(0,0,0,0, true, fullGradient.getCycleMethod(),
                    new Stop(0, fullGradient.getStops().get(0).getColor()));
        }
        if (percentage >= 100) {
            // 100%直接返回原渐变
            return fullGradient;
        }
        double cropRatio = percentage / 100.0;
        List<Stop> newStops = new ArrayList<>();
        List<Stop> originStops = fullGradient.getStops();

        for (int i = 0; i < originStops.size(); i++) {
            Stop current = originStops.get(i);
            if (current.getOffset() <= cropRatio) {
                // 调整停止点偏移适配新的0~1范围
                newStops.add(new Stop(current.getOffset() / cropRatio, current.getColor()));
            } else {
                // 插值计算裁剪位置的颜色作为渐变终点
                Stop preStop = originStops.get(i-1);
                double segmentRatio = (cropRatio - preStop.getOffset()) / (current.getOffset() - preStop.getOffset());
                Color cropColor = preStop.getColor().interpolate(current.getColor(), segmentRatio);
                newStops.add(new Stop(1.0, cropColor));
                break;
            }
        }
        return new LinearGradient(
                fullGradient.getStartX(), fullGradient.getStartY(),
                fullGradient.getEndX(), fullGradient.getEndY(),
                fullGradient.isProportional(), fullGradient.getCycleMethod(),
                newStops
        );
    }
}

使用示例 #

// 定义原始完整渐变：从红到蓝的水平渐变
LinearGradient fullGradient = new LinearGradient(
        0, 0, 1, 0,
        true,
        CycleMethod.NO_CYCLE,
        new Stop(0, Color.RED),
        new Stop(1, Color.BLUE)
);
// 截取前30%的渐变填充矩形
rect.setFill(GradientCropUtil.cropGradient(fullGradient, 30));

方案2：控件区域裁剪 #

如果不需要修改渐变本身，可以通过裁剪控件的显示区域实现效果，逻辑更简单。

实现代码 #

/**
 * 给节点设置裁剪，仅显示前percentage%的区域
 * @param node 要裁剪的控件/节点
 * @param percentage 显示百分比
 */
public static void cropNodeByPercentage(Node node, double percentage) {
    Rectangle clipRect = new Rectangle();
    // 裁剪区域宽度绑定节点宽度*百分比
    clipRect.widthProperty().bind(node.widthProperty().multiply(percentage / 100.0));
    clipRect.heightProperty().bind(node.heightProperty());
    node.setClip(clipRect);
}

两种方案的适用场景 #

• 方案1适合需要将裁剪后的渐变作为独立Brush复用的场景，裁剪后的渐变本身是完整适配填充区域的，没有多余空白
• 方案2适合临时做百分比展示的场景（比如渐变进度条），不需要修改原有渐变配置，性能开销更低

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