Рафаэль Сфера с затененным цветом - Как найти значение оттенка цвета - PullRequest
2 голосов
/ 07 января 2012

У меня есть готовая функция для создания сферы с использованием Raphael javascript Ниже приведен код

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 было взято из 'Math.random ()'. Но теперь я хочу, чтобы мой ожидаемый цветовой оттенок в сфере. У меня есть шестнадцатеричные коды для ожидаемого кода, но я не знаю, как получить точное значение параметра оттенка для генерации того же цвета.

В основном я хочу понять -

  1. Как я могу прочитать выражение - "r (.3, .25) hsb (" + hue + ", 1, .99) -hsb (" + hue + ", .5, .25)"?
  2. Как найти значение параметра оттенка, чтобы получить заданный цвет (например, - # FEFE31)

Примечание. Я использую только HTML и JavaScript

Любая помощь высоко ценится

Ответы [ 2 ]

1 голос
/ 10 января 2012

Вы должны преобразовать свой шестнадцатеричный цвет в 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, так как в чисто черном цвете оттенок не имеет значения.

0 голосов
/ 02 октября 2015
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 плюс ваш код, это было придумано вместе, я думаю, это то, что вы хотели.

...