自定义颜色域,设置始末颜色对应最大最小值,然后以给定值获取对应的颜色

  1. 插件由来
    之前项目开发过程中,项目经理提出了一个要求,这个 x值 要有个对应颜色,而且在绿色到红色的范围之内,就是值越大越接近红色,越小越接近绿色。就是以值取色。
  2. 思路分析
    1). 自定义一个颜色色阶,可以接受 n 个颜色值,然后列出色阶,以下是 绿色到红色 的色阶
        
    2). 把色阶上第一个颜色设置一个对应最小值,同理设置最大值
    3). 然后把 x值 对比最小最大值中所在位置对应颜色所在位置而取得颜色
        
  3. 具体实现
    1). 颜色值转换成rgb颜色
    var getRGBObj = function (color) {
           var sColor = color.toLowerCase();
                if (sColor && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(sColor)) {
                    if (sColor.length === 4) {
                        var sColorNew = "#";
                        for (var i = 1; i < 4; i += 1)
                            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                        sColor = sColorNew;
                    }
                    var sColorChange = [];
                    for (var i = 1; i < 7; i += 2) {
                        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
                    }
                    return {r: sColorChange[0], g: sColorChange[1], b: sColorChange[2]};
                } else if (sColor.indexOf("rgb") >= 0) {
                    var subRgb = sColor.replace("rgb(", "").replace(")", "");
                    var arrRgb = subRgb.split(",");
                    r = parseInt(arrRgb[0]);
                    g = parseInt(arrRgb[1]);
                    b = parseInt(arrRgb[2]);
                    return {r: r, g: g, b: b}
                } else {
                    return EN_COLOR[sColor];//EN_COLOR对象在最后面
                }
            };
    注:这里可以看到,没有rgba转rgb的代码,也就是说本插件仅支持rgb,十六进制颜色和英文名称颜色;因为背景颜色不确定,rgba这种有透明值的颜色很难转成rgb;
    2). 设置颜色域
            var arrColor = [];
            var dealRGB = function (ftRgb, ltRgb, arrColor, num) {
                var oRgb = {
                    or: (ltRgb.r - ftRgb.r) / num,
                    og: (ltRgb.g - ftRgb.g) / num,
                    ob: (ltRgb.b - ftRgb.b) / num
                };
                for (var j = 0; j < num; j++) {
                    var curR = parseInt(ftRgb.r + oRgb.or * j);
                    var curG = parseInt(ftRgb.g + oRgb.og * j);
                    var curB = parseInt(ftRgb.b + oRgb.ob * j);
                    arrColor.push("rgb(" + curR + "," + curG + "," + curB + ")");
                }
            };
    参数解析:ftRgb:首颜色,ltRfb:末颜色,arrColor:色阶数组,num:颜色粒度(即始末两个颜色之间划分 n 个颜色);oRgb是划分粒度后的颜色偏差值
    3). 设值取值
        把 arrColor 数组的第一位设置对应最小值,同理,设置最大值;然后 x值所在最大最小值的位置就是对应 arrColor中的位置的值

  4. 代码展示
    /*
        自定义工具
        I am lzy
        2018-01-5
    */
    
    /*
    插件-以值取色
    使用方法说明:
        1.此插件位原生js插件;
           * 通过传入自定义颜色域(颜色数组),以及给定值和最大值最小值设置(最大最小值默认1000和0,不设置将使用默认值),
           * 然后返回给定值所对应的颜色。
           * 注意:本方法不支持rgba颜色,原因:没有父节点的背景颜色难以转换成rgb颜色
        2.获取对象
            var val2RGB = Val2RGB(colors,maxNum,minNum);
            colors:颜色数组(可以是一个颜色值,将会使用白色与其配色;必须),可以是rgb,十六进制值,或英文名称值
            maxNum:最大值(可选)
            minNum:最小值(可选)
        3.设置配置
            val2RGB.getRGB(value,maxNum,minNum);
            value:给定值(该值建议在最大最小值范围之内)
            maxNum:最大值(范围, 可选)
            minNum:最小值(范围,可选)
            return:对应给定值的颜色(rgb值)
     */
    window.Val2RGB = function (colors, maxNum, minNum) {
        var initRgb = function (colors, maxNum, minNum) {
            if (!colors) throw new Error('颜色值未配置');
            var attrColors = [];
            if (Array.isArray(colors)) {
                if (colors.length === 0) throw new Error('颜色组为空');
                attrColors = colors;
            } else {
                attrColors.push(colors);
            }
            this.maxNum = maxNum || 1000;
            this.minNum = minNum || 0;
            this.num = 30;
            this.arrColor = [];
            if (this.minNum > this.maxNum) {
                var temp = this.maxNum;
                this.maxNum = this.minNum;
                this.minNum = temp;
            }
            var getRGBObj = function (color) {
                var sColor = color.toLowerCase();
                if (sColor && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(sColor)) {
                    if (sColor.length === 4) {
                        var sColorNew = "#";
                        for (var i = 1; i < 4; i += 1)
                            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                        sColor = sColorNew;
                    }
                    var sColorChange = [];
                    for (var i = 1; i < 7; i += 2) {
                        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
                    }
                    return {r: sColorChange[0], g: sColorChange[1], b: sColorChange[2]};
                } else if (sColor.indexOf("rgb") >= 0) {
                    var subRgb = sColor.replace("rgb(", "").replace(")", "");
                    var arrRgb = subRgb.split(",");
                    r = parseInt(arrRgb[0]);
                    g = parseInt(arrRgb[1]);
                    b = parseInt(arrRgb[2]);
                    return {r: r, g: g, b: b}
                } else {
                    return EN_COLOR[sColor];
                }
            };
            var dealRGB = function (ftRgb, ltRgb, arrColor, num) {
                var oRgb = {
                    or: (ltRgb.r - ftRgb.r) / num,
                    og: (ltRgb.g - ftRgb.g) / num,
                    ob: (ltRgb.b - ftRgb.b) / num
                };
                for (var j = 0; j < num; j++) {
                    var curR = parseInt(ftRgb.r + oRgb.or * j);
                    var curG = parseInt(ftRgb.g + oRgb.og * j);
                    var curB = parseInt(ftRgb.b + oRgb.ob * j);
                    arrColor.push("rgb(" + curR + "," + curG + "," + curB + ")");
                }
            };
            if (attrColors.length === 1) {
                dealRGB({r: 255, g: 255, b: 255}, getRGBObj(attrColors[0]), this.arrColor, this.num);
            } else {
                for (var i = 0; i < attrColors.length - 1; i++) {
                    dealRGB(getRGBObj(attrColors[i]), getRGBObj(attrColors[i + 1]), this.arrColor, this.num);
                }
            }
        };
        initRgb.prototype.getRGB = function (value,maxNum,minNum) {
            var val = value || 0, max = maxNum || this.maxNum, min = minNum || this.minNum;
            if (val > max) val = max;
            if (val < min) val = min;
            val = val - min;
            max = max - min;
            var idx = Math.round(val / (max / this.arrColor.length));
            return this.arrColor[idx === this.arrColor.length ? idx - 1 : idx];
    
        };
        var EN_COLOR=null;//请复制6标题下面那部分
        return new initRgb(colors, maxNum, minNum);
    };


  5. 使用方法
                //这里的颜色数组不限制长度;也可以是一个颜色值(将会与白色配对);该对象固定了最大最小值
                var val2RGB = Val2RGB(["green", "red"], max, min);
                var myRgb = val2RGB.getRGB(val); //该值 val 所在max和min之间对应的颜色值
    
                var newMax=1500,newMin=100;
                //这里将使用新设置的最大最小值只是当前方法一次有效,不影响原有 val2RGB对象已经设置的最大最小值,
                //即再次调用 getRGB()  时,最大最小值还是max和min;
                myRgb = val2RGB.getRGB(val,newMax,newMin);

  6. 英文颜色对象
            var EN_COLOR={aliceblue:{r:240,g:248,b:255},antiquewhite:{r:250,g:235,b:215},aqua:{r:0,g:255,b:255},aquamarine:{r:127,g:255,b:212},azure:{r:240,g:255,b:255},beige:{r:245,g:245,b:220},bisque:{r:255,g:228,b:196},black:{r:0,g:0,b:0},blanchedalmond:{r:255,g:235,b:205},blue:{r:0,g:0,b:255},blueviolet:{r:138,g:43,b:226},brown:{r:165,g:42,b:42},burlywood:{r:222,g:184,b:135},cadetblue:{r:95,g:158,b:160},chartreuse:{r:127,g:255,b:0},chocolate:{r:210,g:105,b:30},coral:{r:255,g:127,b:80},cornflowerblue:{r:100,g:149,b:237},cornsilk:{r:255,g:248,b:220},crimson:{r:220,g:20,b:60},cyan:{r:0,g:255,b:255},darkblue:{r:0,g:0,b:139},darkcyan:{r:0,g:139,b:139},darkgoldenrod:{r:184,g:134,b:11},darkgray:{r:169,g:169,b:169},darkgreen:{r:0,g:100,b:0},darkkhaki:{r:189,g:183,b:107},darkmagenta:{r:139,g:0,b:139},darkolivegreen:{r:85,g:107,b:47},darkorange:{r:255,g:140,b:0},darkorchid:{r:153,g:50,b:204},darkred:{r:139,g:0,b:0},darksalmon:{r:233,g:150,b:122},darkseagreen:{r:143,g:188,b:143},darkslateblue:{r:72,g:61,b:139},darkslategray:{r:47,g:79,b:79},darkturquoise:{r:0,g:206,b:209},darkviolet:{r:148,g:0,b:211},deeppink:{r:255,g:20,b:147},deepskyblue:{r:0,g:191,b:255},dimgray:{r:105,g:105,b:105},dodgerblue:{r:30,g:144,b:255},feldspar:{r:209,g:146,b:117},firebrick:{r:178,g:34,b:34},floralwhite:{r:255,g:250,b:240},forestgreen:{r:34,g:139,b:34},fuchsia:{r:255,g:0,b:255},gainsboro:{r:220,g:220,b:220},ghostwhite:{r:248,g:248,b:255},gold:{r:255,g:215,b:0},goldenrod:{r:218,g:165,b:32},gray:{r:128,g:128,b:128},green:{r:0,g:128,b:0},greenyellow:{r:173,g:255,b:47},honeydew:{r:240,g:255,b:240},hotpink:{r:255,g:105,b:180},indianred:{r:205,g:92,b:92},indigo:{r:75,g:0,b:130},ivory:{r:255,g:255,b:240},khaki:{r:240,g:230,b:140},lavender:{r:230,g:230,b:250},lavenderblush:{r:255,g:240,b:245},lawngreen:{r:124,g:252,b:0},lemonchiffon:{r:255,g:250,b:205},lightblue:{r:173,g:216,b:230},lightcoral:{r:240,g:128,b:128},lightcyan:{r:224,g:255,b:255},lightgoldenrodyellow:{r:250,g:250,b:210},lightgrey:{r:211,g:211,b:211},lightgreen:{r:144,g:238,b:144},lightpink:{r:255,g:182,b:193},lightsalmon:{r:255,g:160,b:122},lightseagreen:{r:32,g:178,b:170},lightskyblue:{r:135,g:206,b:250},lightslateblue:{r:132,g:112,b:255},lightslategray:{r:119,g:136,b:153},lightsteelblue:{r:176,g:196,b:222},lightyellow:{r:255,g:255,b:224},lime:{r:0,g:255,b:0},limegreen:{r:50,g:205,b:50},linen:{r:250,g:240,b:230},magenta:{r:255,g:0,b:255},maroon:{r:128,g:0,b:0},mediumaquamarine:{r:102,g:205,b:170},mediumblue:{r:0,g:0,b:205},mediumorchid:{r:186,g:85,b:211},mediumpurple:{r:147,g:112,b:216},mediumseagreen:{r:60,g:179,b:113},mediumslateblue:{r:123,g:104,b:238},mediumspringgreen:{r:0,g:250,b:154},mediumturquoise:{r:72,g:209,b:204},mediumvioletred:{r:199,g:21,b:133},midnightblue:{r:25,g:25,b:112},mintcream:{r:245,g:255,b:250},mistyrose:{r:255,g:228,b:225},moccasin:{r:255,g:228,b:181},navajowhite:{r:255,g:222,b:173},navy:{r:0,g:0,b:128},oldlace:{r:253,g:245,b:230},olive:{r:128,g:128,b:0},olivedrab:{r:107,g:142,b:35},orange:{r:255,g:165,b:0},orangered:{r:255,g:69,b:0},orchid:{r:218,g:112,b:214},palegoldenrod:{r:238,g:232,b:170},palegreen:{r:152,g:251,b:152},paleturquoise:{r:175,g:238,b:238},palevioletred:{r:216,g:112,b:147},papayawhip:{r:255,g:239,b:213},peachpuff:{r:255,g:218,b:185},peru:{r:205,g:133,b:63},pink:{r:255,g:192,b:203},plum:{r:221,g:160,b:221},powderblue:{r:176,g:224,b:230},purple:{r:128,g:0,b:128},red:{r:255,g:0,b:0},rosybrown:{r:188,g:143,b:143},royalblue:{r:65,g:105,b:225},saddlebrown:{r:139,g:69,b:19},salmon:{r:250,g:128,b:114},sandybrown:{r:244,g:164,b:96},seagreen:{r:46,g:139,b:87},seashell:{r:255,g:245,b:238},sienna:{r:160,g:82,b:45},silver:{r:192,g:192,b:192},skyblue:{r:135,g:206,b:235},slateblue:{r:106,g:90,b:205},slategray:{r:112,g:128,b:144},snow:{r:255,g:250,b:250},springgreen:{r:0,g:255,b:127},steelblue:{r:70,g:130,b:180},tan:{r:210,g:180,b:140},teal:{r:0,g:128,b:128},thistle:{r:216,g:191,b:216},tomato:{r:255,g:99,b:71},turquoise:{r:64,g:224,b:208},violet:{r:238,g:130,b:238},violetred:{r:208,g:32,b:144},wheat:{r:245,g:222,b:179},white:{r:255,g:255,b:255},whitesmoke:{r:245,g:245,b:245},yellow:{r:255,g:255,b:0},yellowgreen:{r:154,g:205,b:50}};
    


猜你喜欢

转载自blog.csdn.net/lzy_1993/article/details/80467847