我有三种由用户引入的十六进制颜色,例如:
#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 举报,一经查实,本站将立刻删除。