Question

我准备好使用Raphael javascript创建一个Sphere的功能。以下是代码

Raphael.fn.ball = function (x, y, r, hue) {
            hue = hue || 0;
            return this.ellipse(x, y, r, r).attr({fill: "r(.3,.25)hsb(" + hue + ", 1, .99)-hsb(" + hue + ", .5, .25)", stroke: "none"});
        };

此功能可创建内部带阴影颜色的球体。使用传递给它的hue变量生成颜色。在原始代码中，hue参数的值取自'Math.random（）'。但现在我想要我对球体的预期色调。我有预期代码的十六进制代码，但我不知道如何获得精确的色调参数值来生成相同的颜色。

基本上我想了解 -

我如何阅读表达式 - “r（。3，.25）hsb（”+ hue +“，1，.99）-hsb（”+ hue +“，。5，.25）”？< / LI>
如何找到获取给定颜色的hue参数值（例如 - ＃FEFE31）

注意：我只使用HTML和javascript

任何帮助都是高度评价的

Answer 1

您必须将Hex颜色转换为RGB然后转换为HSB

var hex = "#cc0000";
var rgb = Raphael.getRGB(hex)
var hsb = Raphael.rgb2hsb(rgb)
alert(hsb.h + " is the hue");

请记住，RGB不能完美映射到HSB。所以，例如，如果你设置......

fill: "hsb(.55, 0%, 0%)"

你可能会得到一些与hue.h不同的东西，就像纯黑色一样，色调并不重要。

Answer 2

Raphael.fn.ball = function (x, y, r, hue) {
        hue = hue || 0;
        var hex = hue;
        var rgb = Raphael.getRGB(hex)
        var hsb = Raphael.rgb2hsb(rgb)
        return this.ellipse(x, y, r, r).attr({fill: "r(.3,.25)hsb(" + hsb['h'] + ", 1, .99)-hsb(" + hsb['h'] + ", .5, .25)", stroke: "none"});
    };`

使用@ Duopixel的响应加上你的代码，这已经被编造在一起，我相信这就是你想要的。

Raphael Sphere带有阴影颜色 - 如何找到颜色的色调值

2 个答案: