zoukankan      html  css  js  c++  java
  • 将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}


  • 相关阅读:
    python (八)迭代器、生成器、列表推导式
    python (七)装饰器
    HTML基础 (一)
    jQuery(一)
    JavaScript 练习(二)事件
    DOM节点(二)
    git操作顺序
    VUE练习(二)解决Bug
    前端环境VSCode
    JavaScript 基础基础最基础
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6793093.html
Copyright © 2011-2022 走看看