javascript – 如何用百分比计算三者之间的比例颜色?

我有三种由用户引入的十六进制颜色,例如:

#39bf26
#c7c228
#C7282E

然后他们必须选择1到100之间的百分比.

>如果percentaje为100,则返回的颜色为
插入的第一个颜色:#39bf26.
>如果百分比为50,则返回的颜色为
插入第二种颜色:#c7c228.
>如果percentaje为1,则返回的颜色为
插入第三种颜色:#C7282E.
>最后,如果百分比介于任何先前的值之间,
然后返回的颜色将是两者的比例混合
百分之几的颜色< 50和两种最后颜色的混合如果
percentaje> 50.

我在这里找到了类似的算法:
http://www.awcore.com/js/snippets/161/from-red-to-green-color-map-depend-on-percentage_en

但我担心我没有色彩算法方面的经验,所以我希望你能给我一些建议或指导.

如果您需要更多信息,请告诉我,我将编辑帖子.

解决方法

不必要的过度杀伤 – 引入Color对象来解析,.scale和.add十六进制颜色

var Colour = (function () {
    function limit(x) {
        if (x > 255) return 255;
        if (x < 0) return 0;
        return Math.floor(x);
    }
    function toHex(r,g,b) {
        if (r > 15) r = r.toString(16);
        else r = '0' + r.toString(16);
        if (g > 15) g = g.toString(16);
        else g = '0' + g.toString(16);
        if (b > 15) b = b.toString(16);
        else b = '0' + b.toString(16);
        return '#' + (r + g + b).toUpperCase();
    }
    function Colour(hex) {
        if (hex.length === 7 || hex.length === 4) hex = hex.slice(1);
        if (hex.length === 3)
            hex = hex.charAt(0) + hex.charAt(0)
                + hex.charAt(1) + hex.charAt(1)
                + hex.charAt(2) + hex.charAt(2);
        this.hex = '#' + hex.toUpperCase();
        this.r = parseInt(hex.slice(0,2),16);
        this.g = parseInt(hex.slice(2,4),16);
        this.b = parseInt(hex.slice(4,6),16);
    }
    Colour.prototype.scale = function (x) {
        this.r = limit(this.r * x);
        this.g = limit(this.g * x);
        this.b = limit(this.b * x);
        this.hex = toHex(this.r,this.g,this.b);
        return this;
    };
    Colour.prototype.add = function (c) {
        return new Colour(
            toHex(
                limit(this.r + c.r),limit(this.g + c.g),limit(this.b + c.b)
            )
        );
    };
    Colour.prototype.toString = function () {
        return this.hex;
    };
    Colour.prototype.valueOf = Colour.prototype.toString;
    return Colour;
}());

然后介绍你的颜色;

var myColours = [
    new Colour('#39bf26'),// Colour {hex: "#39BF26",r: 57,g: 191,b: 38,…}
    new Colour('#c7c228'),// Colour {hex: "#C7C228",r: 199,g: 194,b: 40,…}
    new Colour('#C7282E')  // Colour {hex: "#C7282E",g: 40,b: 46,…}
];

现在写一个百分比逻辑的函数

function percent(x,col) {
    var factor;
    if (x < 50) {
        factor = (50 - x) / 50;
        return col[0].scale(factor).add(col[1].scale(1-factor));
    } else {
        factor = (100 - x) / 50;
        return col[2].scale(factor).add(col[1].scale(1-factor));
    }
}

并使用它

percent(25,myColours); // Colour {hex: "#7FC027",r: 127,g: 192,b: 39,…}
percent(75,myColours); // Colour {hex: "#C6752B",r: 198,g: 117,b: 43,…}

不幸的是(除非你想引入新的属性)这将遭受小的舍入误差,如75%的结果所示(C6不是C7的红色,因为C7 = 199,199 / 2 = 99.5 => 99,然后99 99 = 198 => C6).

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)