JavaScript

Neděle, 22. červen 2008

JavaScript: Převod barevných složek RGB do tvaru RRGGBB

Při tvorbě jakékoli aplikace je dobré vyvažovat přehlednost zápisu kódu s jeho efektivitou. Protože interprety JavaScriptu bohužel nejsou z nejrychlejších, přichází velmi často ke slovu právě faktor druhý, na úkor intuitivnosti zápisu. Jako třeba u následujícího problému:

Máme barevné složky R, G a B, z nichž každá je vyjádřena desetinným číslem v intervalu <0; 1>. Z těch potřebujeme získat řetězec ve tvaru RRGGBB. Složky bude tedy třeba zvětšit do rozsahu 0–255, zaokrouhlit, převést na čísla šestnáctková a jednoznakové výsledky zleva doplnit nulou, aby sestavený řetězec měl vždy právě šest znaků. Jak ale splnit poslední požadavek co nejrychleji a bez podmíněného přidávání nuly?

Metoda číslo.toString(16) sice převede číslo do šestnáctkové soustavy, ale k doplnění počáteční nuly ji přimět nelze. Na sprintf() můžeme zapomenout a co se týče regulárních výrazů, jejich vyhodnocení je pomalé. Nabízí se vkládat nulu vždy a potom z řetězce zprava vytáhnout dva znaky, tedy ('0'+cislo).substr(-2), jenže IE záporný offset nepodporuje.

Nedávno mě trklo zajímavé řešení. K číslům nejprve přičteme 256, čímž po převodu získáme vždy nejméně 10016 a nejvíce 1FF16. Pak zbývá jen oříznout počáteční jedničku. Jak jsem zmínil na začátku, přehlednost takového algoritmu je na pováženou, ale za tu efektivitu jistě stojí:

function rgbToHex(R, G, B) {
    return (
        Math.round(256 + 255*R).toString(16).substr(1) +
        Math.round(256 + 255*G).toString(16).substr(1) +
        Math.round(256 + 255*B).toString(16).substr(1)
    )
}

Rubriky

Navigace

Hledání