动态分割渐变色带并取得相应的颜色值

项目中需要将后台取得的n条数据添加颜色值再返回给后台，这是需要将渐变色带动态的分割成n份;(n===后台获得数据的条数），如下图：

                                  

 

       

 

           

一.渐变算法

首先我们需要学习渐变算法：两种颜色均匀渐变：

例如两种颜色分别是RGB(200,50,0)和RGB(50,200,0)，用上述公式进行计算就是：

　　　　　　RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150 

　　　　　　GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100 

　　　　　　BStep1=BA=BA+(BA-BA)/Step*N=0 

因此RGBStep1=(150,100,0)，同样的方法可以求出RGBStep2=(100,150,0)。

 

知道两种颜色渐变算法，我们很容易分割两种颜色的色带

 

二.多色分割算法

在两种颜色色带的基础上我们可以进一步扩张多种颜色色带的渐变分割，算法如下：

　　1.我们必须知道该色带有几种主颜色，例如我们获取了n条数据，该色带有4种主颜色(红 黄 蓝 黑)，这时我们可以得到分割的份数n/4份以及余数n%4;

　　2.如果余数n%4==0;每份都是n/4;这时将红-黄分割成n/4+1份,只显示前n/4份，将黄-蓝分割成n/4+1份，只显示前n/4份，将蓝-黑分割成2*(n/4)份,显示2*(n/4)份;

　　  如果余数n%4==1;则第一份为n/4+1;其他都是n/4;这时将红-黄分割成n/4+2份,只显示前n/4+1份，将黄-蓝分割成n/4+1份，只显示前n/4份，将蓝-黑分割成2*(n/4)份,显示2*(n/4)份;

 　　 如果余数n%4==2;则第一份为n/4+1;第二份为n/4+1;其他都是n/4;这时将红-黄分割成n/4+2份,只显示前n/4+1份，将黄-蓝分割成n/4+2份，只显示前n/4+1份，将蓝-黑分割成2*(n/4)份,显示2*(n/4)份;

　　  如果余数n%4==3;则第一份为n/4+1;第二份为n/4+1;第三份为n/4+1;其他都是n/4;这时将红-黄分割成n/4+2份,只显示前n/4+1份，将黄-蓝分割成n/4+2份，只显示前n/4+1份，将蓝-黑分割成2*(n/4)+1份,显示2*(n/4)+1份;

　　　即可将色带分割。

上述四色代码如下：

$(function () {
                var r, g, b, residue, every;
                residue = length % 4;//余数
                every = parseInt(length / 4);
                if (residue === 0) {
                    for (var i = 0; i < every ; i++) {
                        s = "#";
                        r = parseInt(255 + 0 / every * i);
                        r = rgb2color(r);
                        g = parseInt(0 + 255 / every * i);
                        g = rgb2color(g);
                        b = parseInt(0 + 0 / every * i);
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = every; i < every * 2 ; i++) {
                        s = "#";
                        r = parseInt(255 - 255 / every * (i - every));
                        r = rgb2color(r);
                        g = parseInt(255 - 255 / every * (i - every));
                        g = rgb2color(g);
                        b = parseInt(0 + 255 / every * (i - every));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = every * 2; i < length ; i++) {
                        s = "#";
                        r = parseInt(0 + 0 / (length - every * 2 - 1) * (i - every * 2));
                        r = rgb2color(r);
                        g = parseInt(0 + 0 / (length - every * 2 - 1) * (i - every * 2));
                        g = rgb2color(g);
                        b = parseInt(255 - 255 / (length - every * 2 - 1) * (i - every * 2));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                } else if (residue === 1) {
                    for (var i = 0; i < (every + 1) ; i++) {
                        s = "#";
                        r = parseInt(255 + 0 / (every + 1) * i);
                        r = rgb2color(r);
                        g = parseInt(0 + 255 / (every + 1) * i);
                        g = rgb2color(g);
                        b = parseInt(0 + 0 / (every + 1) * i);
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = (every + 1) ; i < (every * 2 + 1) ; i++) {
                        s = "#";
                        r = parseInt(255 - 255 / (every) * (i - every - 1));
                        r = rgb2color(r);
                        g = parseInt(255 - 255 / (every) * (i - every - 1));
                        g = rgb2color(g);
                        b = parseInt(0 + 255 / (every) * (i - every - 1));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = (every * 2 + 1) ; i < length ; i++) {
                        s = "#";
                        r = parseInt(0 + 0 / (length - every * 2 - 2) * (i - every * 2 - 1));
                        r = rgb2color(r);
                        g = parseInt(0 + 0 / (length - every * 2 - 2) * (i - every * 2 - 1));
                        g = rgb2color(g);
                        b = parseInt(255 - 255 / (length - every * 2 - 2) * (i - every * 2 - 1));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                } else {
                    for (var i = 0; i < (every + 1) ; i++) {
                        s = "#";
                        r = parseInt(255 + 0 / (every + 1) * i);
                        r = rgb2color(r);
                        g = parseInt(0 + 255 / (every + 1) * i);
                        g = rgb2color(g);
                        b = parseInt(0 + 0 / (every + 1) * i);
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = (every + 1) ; i < (every * 2 + 2) ; i++) {
                        s = "#";
                        r = parseInt(255 - 255 / (every + 1) * (i - every - 1));
                        r = rgb2color(r);
                        g = parseInt(255 - 255 / (every + 1) * (i - every - 1));
                        g = rgb2color(g);
                        b = parseInt(0 + 255 / (every + 1) * (i - every - 1));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                    for (var i = (every * 2 + 2) ; i < length ; i++) {
                        s = "#";
                        r = parseInt(0 + 0 / (length - every * 2 - 3) * (i - every * 2 - 2));
                        r = rgb2color(r);
                        g = parseInt(0 + 0 / (length - every * 2 - 3) * (i - every * 2 - 2));
                        g = rgb2color(g);
                        b = parseInt(255 - 255 / (length - every * 2 - 3) * (i - every * 2 - 2));
                        b = rgb2color(b);
                        s += r;
                        s += g;
                        s += b;
                        $("#color" + i).css("background", s);
                    }
                }
            })


<!---------------------------------------------------------------------->

    //转化为16进制
    function rgb2color(m) {
            var c = Math.round(m).toString(16);
            if (c.length == 1)
                c = '0' + c;
            return c.toUpperCase();
    }

 

转载于:https://www.cnblogs.com/bfive/p/6290046.html