如何在JavaFX渐变中插值颜色？

Question

我试图找出如何复制JavaFX梯度是如何在涉及透明度时插值/混合的。如果我尝试使用内置的color#interpolate方法在颜色之间插值的简单方法，我会得到完全不同的结果。正如您在这里看到的：

这两个渐变都是简单的[红色@0%，rgba(0,0,255,0)@50%,绿色@100%]，但是蓝色在JavaFX渐变（顶部）中根本不可见，在朴素的方法（底部）中非常可见。颜色如何在渐变中插值的实际公式是什么，在哪里可以找到它（即什么类中的什么方法）？

下面是一个显示半透明的例子（从rgba(255,0,0,1）到rgba(0,0,255,0.5））：

该图显示了结果颜色的采样成分（白色代表不透明度）。注意颜色通道是如何非线性内插的。我在找能调整曲线的方程式，如图所示。

Answer 1

这个答案归功于@Fabian

渲染渐变时，Prism使用预乘颜色。

要获得相同的结果，可以手动预乘，如下所示：

java prettyprint-override">public Color interpolatePreMultiplied(double ratio, Color origin, Color target) {
    var opacity = lerp(ratio, origin.getOpacity(), target.getOpacity());
    return opacity == 0.0 ? Color.TRANSPARENT : Color.color(
        lerp(ratio, origin.getRed() * origin.getOpacity(), target.getRed() * target.getOpacity()) / opacity,
        lerp(ratio, origin.getRed() * origin.getOpacity(), target.getRed() * target.getOpacity()) / opacity,
        lerp(ratio, origin.getBlue() * origin.getOpacity(), target.getBlue() * target.getOpacity()) / opacity,
        opacity
    );
}

public double lerp(double ratio, double origin, double target) {
    return origin + (target - origin) * ratio;
}

public Color interpolatePreMultiplied(double ratio, Color origin, Color target) {
    var po = toPreMutliplied(origin);
    var pt = toPreMultiplied(target);
    return toStraightAlpha(po.interpolate(pt, ratio));
}

public Color toPreMultiplied(Color color) {
    return Color.color(
        color.getRed() * color.getOpacity(),
        color.getGreen() * color.getOpacity(),
        color.getBlue() * color.getOpacity(),
        color.getOpacity()
    );
}

public Color toStraightAlpha(Color color) {
    return color.getOpacity() == 0.0 ? Color.TRANSPARENT : Color.color(
        color.getRed() / color.getOpacity(),
        color.getGreen() / color.getOpacity(),
        color.getBlue() / color.getOpacity(),
        color.getOpacity()
    );
}