javascript जावास्क्रिप्ट एचएसबी/एचएसवी रंग को आरजीबी में सटीक रूप से परिवर्तित करता है




converter rgb (4)

यहां एकता सूची में एल्गोरिदम है, आपको फ्लोट, mathf.floor कार्यों को फिर से लिखना होगा और आउटपुट 3 फ्लोट्स का वेक्टर 3 है।

संपादित करें यह इस पृष्ठ पर पहला जवाब था और जब कोई अन्य उत्तर नहीं था, तो यह बहुत मदद प्रदान करने के लिए बेकार लग रहा था, छोटे आरक्षण के साथ जिसे आपको जेएस में लगभग समान संस्करण में परिवर्तित करना है।

function HSVToRGB(h : float, s : float, v : float) {
    h=h%1;
    s=s%1;
    v=v%1;

    var r : float;
    var g : float;
    var b : float;
    var i : float;
    var f : float;
    var p : float;
    var q : float;
    var t : float; 

    i = Mathf.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 Color(r,g,b); 
}

मुझे एचएसबी को आरजीबी में सटीक रूप से परिवर्तित करने की ज़रूरत है, लेकिन मुझे यकीन नहीं है कि बिना किसी गोल किए दशमलव में मोड़ों को बदलने की समस्या को कैसे हल किया जाए। यह वर्तमान फ़ंक्शन है जो मेरे पास कलरपीकर लाइब्रेरी से बाहर है:

HSBToRGB = function (hsb) {

    var rgb = { };
    var h = Math.round(hsb.h);
    var s = Math.round(hsb.s * 255 / 100);
    var v = Math.round(hsb.b * 255 / 100);

        if (s == 0) {

        rgb.r = rgb.g = rgb.b = v;
        } else {
        var t1 = v;
        var t2 = (255 - s) * v / 255;
        var t3 = (t1 - t2) * (h % 60) / 60;

            if (h == 360) h = 0;

                if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
                else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
                else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
                else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
                else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
                else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
                else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
        }

    return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };

जैसा कि आप देख सकते हैं कि इस फ़ंक्शन में गलतता Math.round से आता है


एनपीएम की बढ़ती लोकप्रियता को देखते हुए मुझे लगता है कि एक सरल एपीआई के माध्यम से इन सभी कार्यों वाले package का उल्लेख करना उचित है:

npm रंगीन स्थापित करें

var colorsys = require('colorsys')
colorsys.rgb_to_hsv({ r: 255, g: 255, b: 255 })
// { h: 0 , s: 0 , v: 100 }

ब्राउज़र के लिए: <script src="http://netbeast.github.io/colorsys/browser.js"></script>

colorsys.rgb_to_hex(h, s, v)
// #hexcolor

इस टिप्पणी में पार्थिक गोसर के axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c से मामूली संशोधन के साथ आप प्रत्येक मूल्य को स्वतंत्र रूप से या ऑब्जेक्ट के रूप में एक बार में दर्ज करने देते हैं

/* 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 अपेक्षा करता है, यदि आप डिग्री या रेडियंस का उपयोग कर रहे हैं, तो उन्हें विभाजित करना याद रखें।

लौटा 0 <= r, g, b <= 255 निकटतम इंटीजर के लिए गोलाकार हैं। यदि आप नहीं चाहते हैं कि यह व्यवहार लौटे ऑब्जेक्ट से Math.round s को हटा दें।

और विपरीत (कम विभाजन के साथ)

/* 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 (पूर्णांक होने की आवश्यकता नहीं है)

संपूर्णता के लिए,

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 एचएसवी के माध्यम से जाना।


मैंने एक बार यह समारोह लिखा था:

function mix(a, b, v)
{
    return (1-v)*a + v*b;
}

function HSVtoRGB(H, S, V)
{
    var V2 = V * (1 - S);
    var r  = ((H>=0 && H<=60) || (H>=300 && H<=360)) ? V : ((H>=120 && H<=240) ? V2 : ((H>=60 && H<=120) ? mix(V,V2,(H-60)/60) : ((H>=240 && H<=300) ? mix(V2,V,(H-240)/60) : 0)));
    var g  = (H>=60 && H<=180) ? V : ((H>=240 && H<=360) ? V2 : ((H>=0 && H<=60) ? mix(V2,V,H/60) : ((H>=180 && H<=240) ? mix(V,V2,(H-180)/60) : 0)));
    var b  = (H>=0 && H<=120) ? V2 : ((H>=180 && H<=300) ? V : ((H>=120 && H<=180) ? mix(V2,V,(H-120)/60) : ((H>=300 && H<=360) ? mix(V,V2,(H-300)/60) : 0)));

    return {
        r : Math.round(r * 255),
        g : Math.round(g * 255),
        b : Math.round(b * 255)
    };
}

यह 0 <= एच <= 360, 0 <= एस <= 1 और 0 <= वी <= 1 की अपेक्षा करता है और एक ऑब्जेक्ट देता है जिसमें आर, जी और बी (0 और 255 के बीच पूर्णांक मान) शामिल हैं। मैंने कोड बनाने के लिए इस छवि का इस्तेमाल किया।







hsb