將css 中的16進制顏色, 轉化爲 rgb格式

對dojo/_base/Color模塊的註解, 源地址 https://github.com/robinxiong/dojo/blob/master/_base/Color.js


function fromHex(color){
        /*
         summary:
            將css的屬性值,轉變爲rgb格式的對像

         "#fff"  -> 0xfff
         長度爲4, 一個字符佔用代表一個屬性, 0x10 == 16(2的4次方,即1後面4個0) === 1 0000, 那麼一個f 爲 1111
         佔位符爲 mask = 1111, 用於佔住後四位(&用於保留後四位的值), 其它高位清零
         每一次遍歷都從後四位開始,所以先獲取到 b值,難後移動4位,在獲取到 g, 在移動4位,獲取到 r
         獲取b屬性:
         0000 1111 1111 1111 & 0000 0000 0000 1111 (這裏只列舉出16位, 正常的是32位)
         0000 0000 0000 1111 b保存到變量 c
         0000 1111 1111 1111 >> 4, -> 0000 0000 1111 1111
         獲取g屬性
         0000 0000 1111 1111 & 0000 0000 0000 1111
         0000 0000 0000 1111 獲得到g的值,保存到變量 c
         在移四位,獲取r的值

         "ffffff" -> 0xffffff
         長度爲8,每兩個字符代表一個函數 0xff = 1111 1111
         每次獲取後8位,剛好代表顏色值
         */

        var t = {},
                bits = (color.length == 4) ? 4 : 8,//如果是shorthand, #fff, 那麼bits爲4位, 每一位代表的個屬性, 其它的爲8位 每兩位代表一個屬性 #ffffff00
                mask = (1 << bits) - 1; //表示字節佔位符, 向左移4位或8位,var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111,或者 8位的 1111 1111
        color = Number("0x" + color.substr(1)); //#ff0000 轉變爲16進制0xff0000;
        if(isNaN(color)){
            return null; // Color
        }
        ["b", "g", "r"].forEach(function(x){
            var c = color & mask;
            color >>= bits;
            t[x] = bits == 4 ? 17 * c : c; // 0xfff , 一個f應該代表 255, 應該當[0-255],按15等份劃分,每一等份間隔 17。 所以獲得的值需要乘以17, 才能表示rgb中255的值
        });
        t.a = 1;
        return t;	// Color

    }
    console.log(fromHex("#00f"))  // {r:0, g: 0, b:255, a:1}


發佈了44 篇原創文章 · 獲贊 11 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章