javascript - 动态颜色编码数字

Question

我有一系列元素，每个元素都有自己的 ID。 ID 从 1...n 开始运行。我希望共享一个 ID 的所有元素都以相同的颜色显示。

我知道我可以做一些事情，比如为每个数字定义一个颜色数组，但这将是静态的，我真的不知道我会有多少个数字。

到目前为止，我已经这样做了:

private object getIntColorString(int IDNum)
{
    return IDNum.ToString("X6");
}

但是我没有想通，因为颜色之间的差异太小了。所以我这样做了:

private object getIntColorString(int eventTrainingProgramID)
{
    int colorCode = eventTrainingProgramID * 100; 
    return colorCode.ToString("X6");
}

但是，这会产生相同颜色的多次重复。

有什么建议吗？

Answer 1

好的，颜色可以从 000000(黑色)到 ffffff(白色)，所以有 16777215 个不同的值。 假设您需要在 [0,2147483647] 范围内映射一个整数(0 到 Int.MAX) 到颜色范围 [0,16777215]。

第一个问题:如果同时有 16777217 个或更多元素，某些颜色会重复。如果您有 16777216 个或更少的元素，您可以为每个 ID 映射不同的颜色。

如果你事先知道元素的数量(例如#ID = 100)，你可以这样开始:

• col0 (color if ID0) 可以是 (16777215/#ID)*0
• col1(ID1 的颜色)可以是 (16777215/#ID)*1
• col2(ID2 的颜色)可以是 (16777215/#ID)*2

以此类推，保证相邻颜色之间的差异最大。

如果您事先不知道元素的数量，您可以将 colorJump 定义为使两种颜色在您看来不同的最小增量。这样

• col0 (color if ID0) 可以是 0
• col1(ID1的颜色)可以是col0+colorJump
• col2(ID2的颜色)可以是col1+colorJump

等等