不必要的过度杀伤 - 引入Colour
要解析的对象.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", r: 199, 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)。