zoukankan      html  css  js  c++  java
  • js中RGB值与16进制颜色值进行互转

    今天在调试 konva.js 源码的时候发现作者用js位运算实现RGB值与16进制颜色值进行互转,这里进行下下分析并记录:

    计算机如何表示 RGB 颜色值

    一个像素用RGB表示的话占用3个几节,一共的位数为 3*8 = 24(RGB24),2进制表示为 RRRRRRRR GGGGGGGG BBBBBBBB,16进制表示为 RR GG BB
    此外还有用32位表示一个像素的的(RGB32 我们一般在css中会使用遮罩的颜色值:比如 RGBA(0,0,0,.5))2进制表示为 AAAAAAAA RRRRRRRR GGGGGGGG BBBBBBBB,16进制表示为 AA RR GG BB,(A表示透明通道)

    // 16进制转RGB值
    function _hexToRgb(hex) {
        hex = hex.replace(HASH$1, EMPTY_STRING$1); // HASH$1 = '#' ; EMPTY_STRING$1 = ''
        var bigint = parseInt(hex, 16);
        return {
            r: (bigint >> 16) & 255,
            g: (bigint >> 8) & 255,
            b: bigint & 255,
        };
    },
    
    // RGB值转16进制
    // 其实 ((r << 16) + (g << 8) + b).toString(16)已经可以了,为什么前边还要加个 (1 << 24) 再做处理
    // 解释:为了防止 r,g,b值全为 0 的特殊情况, ((1 << 24))的值二进制表示为 100...0(1后边有24个0),加上r(0),g(0),b(0),结果不变, ((1 << 24)).toString(16) 的值为 "1000000"
    // 这块跟生成一个随机的16进行颜色值的处理类似,考虑到了 #000000(我们平常使用简写为 #000) 的极端特殊情况,函数如: getRandomColor
    function _rgbToHex(r, g, b) {
        return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    },
    
    /**
     * return random hex color
     * @method
     * @memberof Konva.Util
     * @example
     * shape.fill(Konva.Util.getRandomColor());
     */
    function getRandomColor() {
        var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
        // 如果 randColor 的长度不够6位,说明生成的16进制数值 < 2 ** 24,我们需要在高位补0
        while (randColor.length < 6) {
            randColor = ZERO + randColor; // ZERO  = '0'
        }
        return HASH$1 + randColor; // HASH$1 = '#'
    },
    
    // 生成随机rgb值的函数
    function getRandomColor1() {
       const r = Math.round(Math.random() * 255);
       const g = Math.round(Math.random() * 255);
       const b = Math.round(Math.random() * 255);
    
       return `rgb(${r},${g},${b})`;
    }
    

    参考资料

  • 相关阅读:
    delphi for xx in xx do 语法的使用示例
    Delphi XE7的安卓程序如何调用JAVA的JAR,使用JAVA的类?
    ST Visual Programmer批量烧写教程
    关于FATFS文件系统挂载多个磁盘
    STM8不用手动复位进入自带Bootloader方法(串口下载)
    Linux下安装Eclipse
    微信平台二次开发实例讲解——三元篇
    架构设计深入学习01--概论与预架构阶段
    Linux tomcat安装详解
    程序员的自我修养——操作系统篇
  • 原文地址:https://www.cnblogs.com/hanshuai/p/15059600.html
Copyright © 2011-2022 走看看