JavaFX Color与HSL Web定义

时间:2019-03-05 08:08:33

标签: javafx colors javafx-8 hsl

我实现了图形生成器并注意到了一些东西-让我们称之为奇怪?

WEB:HSLA-一种颜色标准,其中color pickers 1可用,您甚至可以在html as background颜色上测试这些颜色。

例如:(一种)白色的表示形式:     hsla(270,100%,100%,1)

我的图形生成器通过HSLA中的JavaFX模型创建颜色,我注意到颜色(白色)不是我在普通网络HSLA模型中获得的颜色-(Google chrome )

甚至JavaDoc说:

Color c = Color.web("hsla(270,100%,100%,1.0)");// blue as an hsl web value, explicit alpha

这是怎么了?我会混合一些东西吗? 这是错误还是功能?

更新:HTML Web HSLA

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(0,100%,100%,1);}
#p2 {background-color:hsla(270,100%,100%,1);}
</style>
</head>

<body>
<p>HSL colors with opacity:</p>
<p id="p1">JavaFX red is white in web</p>
<p id="p2">JavaFX blue is white in web</p>
</body>
</html>

这里是演示“功能”的JavaFX示例-请注意,我实现了自定义HSLAColor,它计算了正确的值(也在本应用程序中进行了演示

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class HslaWorld extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello HSLA World!");

        VBox box = new VBox();

        Label red = new Label("JavaFX HSLA red is white in web");
        red.setMaxWidth(Double.MAX_VALUE);
        red.setStyle("-fx-background-color: " + toHex(Color.web("hsla(0,100%,100%,1.0)")));

        Label blue = new Label("JavaFX HSLA blue is white in web");
        blue.setMaxWidth(Double.MAX_VALUE);
        blue.setStyle("-fx-background-color: " + toHex(Color.web("hsla(270,100%,100%,1.0)")));

        box.getChildren().addAll(red, blue);
        {
            Label redfixed = new Label("Custom HSLA is white in web");
            redfixed.setMaxWidth(Double.MAX_VALUE);
            redfixed.setStyle("-fx-background-color: " + toHex(new HSLColor(0, 100, 100, 1.0).getColor()));

            Label bluefixed = new Label("Custom HSLA is white in web");
            bluefixed.setMaxWidth(Double.MAX_VALUE);
            bluefixed.setStyle("-fx-background-color: " + toHex(new HSLColor(270, 100, 100, 1.0).getColor()));

            box.getChildren().addAll(redfixed, bluefixed);
        }

        primaryStage.setScene(new Scene(box, 300, 250));
        primaryStage.show();
    }

    private static String toHex(Color c) {
        return "#" + Integer.toHexString(c.hashCode());
    }
}


import javafx.scene.paint.Color;

/**
 * The HSLColor class provides methods to manipulate HSL (Hue, Saturation
 * Luminance) values to create a corresponding Color object using the RGB
 * ColorSpace.
 *
 * The HUE is the color, the Saturation is the purity of the color (with respect
 * to grey) and Luminance is the brightness of the color (with respect to black
 * and white)
 *
 * The Hue is specified as an angel between 0 - 360 degrees where red is 0,
 * green is 120 and blue is 240. In between you have the colors of the rainbow.
 * Saturation is specified as a percentage between 0 - 100 where 100 is fully
 * saturated and 0 approaches gray. Luminance is specified as a percentage
 * between 0 - 100 where 0 is black and 100 is white.
 *
 * In particular the HSL color space makes it easier change the Tone or Shade of
 * a color by adjusting the luminance value.
 */
public class HSLColor {

    private Color rgb;
    private double[] hsl;
    private double alpha;

    /**
     * Create a HSLColor object using an RGB Color object.
     *
     * @param rgb
     *            the RGB Color object
     */
    public HSLColor(Color rgb) {
        this.rgb = rgb;
        hsl = fromRGB(rgb);
        alpha = rgb.getOpacity() / 255.0f;
    }

    /**
     * Create a HSLColor object using individual HSL values and a default alpha
     * value of 1.0.
     *
     * @param h
     *            is the Hue value in degrees between 0 - 360
     * @param s
     *            is the Saturation percentage between 0 - 100
     * @param l
     *            is the Lumanance percentage between 0 - 100
     */
    public HSLColor(double h, double s, double l) {
        this(h, s, l, 1.0f);
    }

    /**
     * Create a HSLColor object using individual HSL values.
     *
     * @param h
     *            the Hue value in degrees between 0 - 360
     * @param s
     *            the Saturation percentage between 0 - 100
     * @param l
     *            the Lumanance percentage between 0 - 100
     * @param alpha
     *            the alpha value between 0 - 1
     */
    public HSLColor(double h, double s, double l, double alpha) {
        hsl = new double[] { h, s, l };
        this.alpha = alpha;
        rgb = toRGB(hsl, alpha);
    }

    /**
     * Create a HSLColor object using an an array containing the individual HSL
     * values and with a default alpha value of 1.
     *
     * @param hsl
     *            array containing HSL values
     */
    public HSLColor(double[] hsl) {
        this(hsl, 1.0f);
    }

    /**
     * Create a HSLColor object using an an array containing the individual HSL
     * values.
     *
     * @param hsl
     *            array containing HSL values
     * @param alpha
     *            the alpha value between 0 - 1
     */
    public HSLColor(double[] hsl, double alpha) {
        this.hsl = hsl;
        this.alpha = alpha;
        rgb = toRGB(hsl, alpha);
    }

    /**
     * Create a RGB Color object based on this HSLColor with a different Hue
     * value. The degrees specified is an absolute value.
     *
     * @param degrees
     *            - the Hue value between 0 - 360
     * @return the RGB Color object
     */
    public Color adjustHue(double degrees) {
        return toRGB(degrees, hsl[1], hsl[2], alpha);
    }

    /**
     * Create a RGB Color object based on this HSLColor with a different
     * Luminance value. The percent specified is an absolute value.
     *
     * @param percent
     *            - the Luminance value between 0 - 100
     * @return the RGB Color object
     */
    public Color adjustLuminance(double percent) {
        return toRGB(hsl[0], hsl[1], percent, alpha);
    }

    /**
     * Create a RGB Color object based on this HSLColor with a different
     * Saturation value. The percent specified is an absolute value.
     *
     * @param percent
     *            - the Saturation value between 0 - 100
     * @return the RGB Color object
     */
    public Color adjustSaturation(double percent) {
        return toRGB(hsl[0], percent, hsl[2], alpha);
    }

    /**
     * Create a RGB Color object based on this HSLColor with a different Shade.
     * Changing the shade will return a darker color. The percent specified is a
     * relative value.
     *
     * @param percent
     *            - the value between 0 - 100
     * @return the RGB Color object
     */
    public Color adjustShade(double percent) {
        double multiplier = (100.0f - percent) / 100.0f;
        double l = Math.max(0.0f, hsl[2] * multiplier);

        return toRGB(hsl[0], hsl[1], l, alpha);
    }

    /**
     * Create a RGB Color object based on this HSLColor with a different Tone.
     * Changing the tone will return a lighter color. The percent specified is a
     * relative value.
     *
     * @param percent
     *            - the value between 0 - 100
     * @return the RGB Color object
     */
    public Color adjustTone(double percent) {
        double multiplier = (100.0f + percent) / 100.0f;
        double l = Math.min(100.0f, hsl[2] * multiplier);

        return toRGB(hsl[0], hsl[1], l, alpha);
    }

    /**
     * Get the Alpha value.
     *
     * @return the Alpha value.
     */
    public double getAlpha() {
        return alpha;
    }

    /**
     * Create a RGB Color object that is the complementary color of this
     * HSLColor. This is a convenience method. The complementary color is
     * determined by adding 180 degrees to the Hue value.
     * 
     * @return the RGB Color object
     */
    public Color getComplementary() {
        double hue = (hsl[0] + 180.0f) % 360.0f;
        return toRGB(hue, hsl[1], hsl[2]);
    }

    /**
     * Get the Hue value.
     *
     * @return the Hue value.
     */
    public double getHue() {
        return hsl[0];
    }

    /**
     * Get the HSL values.
     *
     * @return the HSL values.
     */
    public double[] getHSL() {
        return hsl;
    }

    /**
     * Get the Luminance value.
     *
     * @return the Luminance value.
     */
    public double getLuminance() {
        return hsl[2];
    }

    /**
     * Get the RGB Color object represented by this HDLColor.
     *
     * @return the RGB Color object.
     */
    public Color getColor() {
        return rgb;
    }

    /**
     * Get the Saturation value.
     *
     * @return the Saturation value.
     */
    public double getSaturation() {
        return hsl[1];
    }

    public String toString() {
        String toString = "HSLColor[h=" + hsl[0] + ",s=" + hsl[1] + ",l=" + hsl[2] + ",alpha=" + alpha + "]";

        return toString;
    }

    /**
     * Convert a RGB Color to it corresponding HSL values.
     *
     * @return an array containing the 3 HSL values.
     */
    public static double[] fromRGB(Color color) {
        // Get RGB values in the range 0 - 1

        // double[] rgb = new double[]{};
        double r = color.getRed();
        double g = color.getGreen();
        double b = color.getBlue();

        // Minimum and Maximum RGB values are used in the HSL calculations

        double min = Math.min(r, Math.min(g, b));
        double max = Math.max(r, Math.max(g, b));

        // Calculate the Hue

        double h = 0.0;

        if (max == min)
            h = 0.0;
        else if (max == r)
            h = ((60.0 * (g - b) / (max - min)) + 360.0) % 360.0;
        else if (max == g)
            h = (60.0 * (b - r) / (max - min)) + 120.0;
        else if (max == b)
            h = (60.0 * (r - g) / (max - min)) + 240.0;

        // Calculate the Luminance

        double l = (max + min) / 2.0;

        // Calculate the Saturation

        double s = 0;

        if (max == min)
            s = 0;
        else if (l <= .5f)
            s = (max - min) / (max + min);
        else
            s = (max - min) / (2 - max - min);

        return new double[] { h, s * 100, l * 100 };
    }

    /**
     * Convert HSL values to a RGB Color with a default alpha value of 1. H
     * (Hue) is specified as degrees in the range 0 - 360. S (Saturation) is
     * specified as a percentage in the range 1 - 100. L (Lumanance) is
     * specified as a percentage in the range 1 - 100.
     *
     * @param hsl
     *            an array containing the 3 HSL values
     *
     * @returns the RGB Color object
     */
    public static Color toRGB(double[] hsl) {
        return toRGB(hsl, 1.0f);
    }

    /**
     * Convert HSL values to a RGB Color. H (Hue) is specified as degrees in the
     * range 0 - 360. S (Saturation) is specified as a percentage in the range 1
     * - 100. L (Lumanance) is specified as a percentage in the range 1 - 100.
     *
     * @param hsl
     *            an array containing the 3 HSL values
     * @param alpha
     *            the alpha value between 0 - 1
     *
     * @returns the RGB Color object
     */
    public static Color toRGB(double[] hsl, double alpha) {
        return toRGB(hsl[0], hsl[1], hsl[2], alpha);
    }

    /**
     * Convert HSL values to a RGB Color with a default alpha value of 1.
     *
     * @param h
     *            Hue is specified as degrees in the range 0 - 360.
     * @param s
     *            Saturation is specified as a percentage in the range 1 - 100.
     * @param l
     *            Lumanance is specified as a percentage in the range 1 - 100.
     *
     * @returns the RGB Color object
     */
    public static Color toRGB(double h, double s, double l) {
        return toRGB(h, s, l, 1.0f);
    }

    /**
     * Convert HSL values to a RGB Color.
     *
     * @param h
     *            Hue is specified as degrees in the range 0 - 360.
     * @param s
     *            Saturation is specified as a percentage in the range 1 - 100.
     * @param l
     *            Lumanance is specified as a percentage in the range 1 - 100.
     * @param alpha
     *            the alpha value between 0 - 1
     *
     * @returns the RGB Color object
     */
    public static Color toRGB(double h, double s, double l, double alpha) {
        if (s < 0.0f || s > 100.0f) {
            String message = "Color parameter outside of expected range - Saturation";
            throw new IllegalArgumentException(message);
        }

        if (l < 0.0f || l > 100.0f) {
            String message = "Color parameter outside of expected range - Luminance";
            throw new IllegalArgumentException(message);
        }

        if (alpha < 0.0f || alpha > 1.0f) {
            String message = "Color parameter outside of expected range - Alpha";
            throw new IllegalArgumentException(message);
        }

        // Formula needs all values between 0 - 1.

        h = h % 360.0f;
        h /= 360f;
        s /= 100f;
        l /= 100f;

        double q = 0;

        if (l < 0.5)
            q = l * (1 + s);
        else
            q = (l + s) - (s * l);

        double p = 2 * l - q;

        double r = Math.max(0, HueToRGB(p, q, h + (1.0f / 3.0f)));
        double g = Math.max(0, HueToRGB(p, q, h));
        double b = Math.max(0, HueToRGB(p, q, h - (1.0f / 3.0f)));

        r = Math.min(r, 1.0f);
        g = Math.min(g, 1.0f);
        b = Math.min(b, 1.0f);

        return new Color(r, g, b, alpha);
    }

    private static double HueToRGB(double p, double q, double h) {
        if (h < 0)
            h += 1;

        if (h > 1)
            h -= 1;

        if (6 * h < 1) {
            return p + ((q - p) * 6 * h);
        }

        if (2 * h < 1) {
            return q;
        }

        if (3 * h < 2) {
            return p + ((q - p) * 6 * ((2.0f / 3.0f) - h));
        }

        return p;
    }
}

“解决方案”是自定义转换,如上所述:

  

似乎Java实际上是解析为HSV而不是文档和方法名称中所述的Web HSL。

1 个答案:

答案 0 :(得分:0)

这似乎是命名混乱。它在文档中指出,这两个显然不是等价的:

<块引用>

Color.web("hsl(240,100%,100%)"); Color.hsb(240.0, 1.0, 1.0, 1.0)