преобразование из HSV в RGB - PullRequest
Новая
       65

преобразование из HSV в RGB

0 голосов
/ 21 февраля 2019

Я использую response-native-color-wheel для создания цветового круга.

У меня есть следующий код: 

    <ColorWheel
      initialColor="#ffffff"
      onColorChange={color => console.log({color})}
      style={{ width: Dimensions.get('window').width }}
      thumbStyle={{ height: 30, width: 30, borderRadius: 30 }}
    />

цвет регистрируется, но как значение HSV, например {h: -120, s: 100, v: 100} (соответствует значению Blue onколесо).Но мне нужен RGB вместо этого.Я безуспешно пытался использовать colorsys .

Спасибо за продвинутый

EDIT: код, используемый для colorsys 

onColorChange={color => {
    var rgb = colorsys.hsvToRgb({color});
    console.log({rgb})
}}

logged: {г: нуль, г: нуль, б: нулевая}

1 Ответ

0 голосов
/ 21 февраля 2019

ссылка в этом комментарии с небольшими изменениями, позволяющими вводить каждое значение независимо или все сразу как объект 

/* accepts parameters
 * h  Object = {h:x, s:y, v:z}
 * OR 
 * h, s, v
*/
function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (arguments.length === 1) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return {
        r: Math.round(r * 255),
        g: Math.round(g * 255),
        b: Math.round(b * 255)
    };
}

Этот код ожидает 0 <= h, s, v<= 1, если вы используете градусы или радианы, не забудьте разделить их. </p>

Возвращенные 0 <= r, g, b <= 255 округляются до ближайшего целого числа.Если вам не нужно это поведение, удалите Math.rounds из возвращенного объекта. </p>

И наоборот (с меньшим делением) 

/* accepts parameters
 * r  Object = {r:x, g:y, b:z}
 * OR 
 * r, g, b
*/
function RGBtoHSV(r, g, b) {
    if (arguments.length === 1) {
        g = r.g, b = r.b, r = r.r;
    }
    var max = Math.max(r, g, b), min = Math.min(r, g, b),
        d = max - min,
        h,
        s = (max === 0 ? 0 : d / max),
        v = max / 255;

    switch (max) {
        case min: h = 0; break;
        case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
        case g: h = (b - r) + d * 2; h /= 6 * d; break;
        case b: h = (r - g) + d * 4; h /= 6 * d; break;
    }

    return {
        h: h,
        s: s,
        v: v
    };
}

Этот код выведет 0 <= h,s, v <= 1, но на этот раз требуется 0 <= r, g, b <= 255 (не обязательно должно быть целым числом) </p>

Для полноты 

function HSVtoHSL(h, s, v) {
    if (arguments.length === 1) {
        s = h.s, v = h.v, h = h.h;
    }
    var _h = h,
        _s = s * v,
        _l = (2 - s) * v;
    _s /= (_l <= 1) ? _l : 2 - _l;
    _l /= 2;

    return {
        h: _h,
        s: _s,
        l: _l
    };
}

function HSLtoHSV(h, s, l) {
    if (arguments.length === 1) {
        s = h.s, l = h.l, h = h.h;
    }
    var _h = h,
        _s,
        _v;

    l *= 2;
    s *= (l <= 1) ? l : 2 - l;
    _v = (l + s) / 2;
    _s = (2 * s) / (l + s);

    return {
        h: _h,
        s: _s,
        v: _v
    };
}

Все эти значения должны быть в диапазоне от 0 до 1. Для HSL <-> RGB используйте HSV.

...