提问人：Fy17 提问时间：10/17/2023 最后编辑：Fy17 更新时间：10/17/2023 访问量：44
根据数字获取蓝色阴影
Get shade of blue based of a number
问：
我有一个如下所示的对象：
{
"id1": 0,
"id2": 10,
"id3": 51,
"id4": 2
}
对象有 200 多个项目。每个值都是一个随机数，>=0。
- 最大值;Object 值中的最大数字。
- 最小值;0
所有这些值都是一个大型 html 网格的一部分，每个值在其 innerHTML 中都有一个数字，如下所示： https://media.discordapp.net/attachments/946057540687515658/1163523785962553404/Screenshot_20231016_190204_Sheets.jpg?ex=653fe2f7&is=652d6df7&hm=02857d9a3b6621f1c4328ef2f41fc4558de14d642c681c42b14af26d5aac989a&
每个网格单元都应根据数字的大小赋予一种颜色，即蓝色阴影。maxValue 是最大的值，应具有最深的蓝色 （3， 82， 255），接近 minValue 的值应为更白色/浅蓝色。
我怎样才能实现这样的目标？任何帮助都是值得赞赏的！
答：
0赞
Nina Scholz
10/17/2023
#1
您可以通过分离红色/灰色/蓝色部分并取整数部分来计算新颜色
class RGB {
constructor (r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
}
const
getNormalized = (min, max, left, right) => v => (v - min) * (right - left) / (max - min) + left,
prepareColor = (rgbA, rgbB, min, max) => value => [
getNormalized(min, max, rgbA.r, rgbB.r)(value),
getNormalized(min, max, rgbA.g, rgbB.g)(value),
getNormalized(min, max, rgbA.b, rgbB.b)(value)
].map(v => Math.floor(v).toString(16).padStart(2, 0)).join(''),
getColor = prepareColor(new RGB(255, 255, 255), new RGB(3, 82, 255), 1, 84);
console.log(getColor(1));
console.log(getColor(41.5));
console.log(getColor(84));
评论