将css 中的16进制颜色, 转化为 rgb格式 - jzssuanfa

jzssuanfa 2021-08-26 原文


将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}

发表于
2017-05-01 21:58 
jzssuanfa 
阅读(916
评论(0
编辑 
收藏 
举报

 

版权声明:本文为jzssuanfa原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/jzssuanfa/p/6793093.html

将css 中的16进制颜色, 转化为 rgb格式 - jzssuanfa的更多相关文章

  1. 成都市新社保卡线上申请方法(无需线下办理,手机直接搞定) – 你不知道的巨蟹

    成都市新社保卡线上申请方法(无需线下办理,手机直接搞定)      官方消息,从2019年11月1日起,成都市 […]...

  2. SP10707 COT2 – Count on a tree II 树链不同的元素个数 树上莫队

    题目 SP10707 COT2 – Count on a tree II (https://www […]...

  3. FileInputFormat 的实现之TextInputFormat – 天生一对

    FileInputFormat 的实现之TextInputFormat 说明 TextInputFormat默 […]...

  4. 《RabbitMQ Tutorial》译文 第 4 章 路由

    原文来自 RabbitMQ 英文官网的教程(4.Routing),其示例代码采用了 .NET C# 语言。 I […]...

  5. 组合数公式 – Er_in

    组合数公式 从n个数里面选出m个数,共有多少种选法。应该用n的阶乘除以m的阶乘再除以n-m的阶乘 递推公式 c […]...

  6. Unity3D ——强大的跨平台3D游戏开发工具教程 – jack船长大哥

    Unity3D ——强大的跨平台3D游戏开发工具教程   http://unity3d.9ria.com/?p […]...

  7. [SQL]复制数据库某一个表到另一个数据库中 – beeone

    SQL:复制数据库某一个表到另一个数据库中 SELECT * INTO 表1 FROM 表2 --复制表2如果 […]...

  8. VCL 中的 Windows API 函数(5): AlphaBlend

    AlphaBlend 是指定图像混合透明的函数, 在 Graphics、GraphUtil、RibbonSty […]...

随机推荐

  1. 华为HCNA——配置telnet登陆设备

    1.给接口配置一个ip 2.配置验证方式 进入aaa配置模式 aaa 添加用户和密码 local-user 1 […]...

  2. 前端js实现打印excel表格

    产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 图片.png 图片.pn […]...

  3. leetcode-139-单词拆分(递归超时,动归解决)

    题目描述: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆 […]...

  4. Scheme实现数字电路仿真(3)——模块

      版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖。如要转贴,必须注明原文网址   http:/ […]...

  5. vue项目开发基本流程

    404...

  6. ES 30 – Elasticsearch生产集群的服务器配置建议

    目录 1 服务器的内存 2 服务器的CPU 3 服务器的磁盘 4 集群的网络 5 集群的节点个数 6 JVM的 […]...

  7. 软件架构和设计模式

    软件架构与设计模式 软件架构与设计模式的区别 有很多程序员经常会把软件架构和设计模式混淆,比如认为MVC架构是 […]...

  8. Cisco路由器交换机配置命令详解

    Cisco路由器交换机配置命令详解 1. 交换机支持的命令:   交换机基本状态:   switch: ;RO […]...

展开目录

目录导航