【问题标题】:Generate a colour based on a name in Javascript [closed]根据Javascript中的名称生成颜色[关闭]
【发布时间】:2015-03-12 15:07:52
【问题描述】:

我想使用 Javascript 根据人名从预定义的颜色列表中选择一种颜色。

我想要一个彩色圆圈,中间是人名的第一个字母。所需的效果很像 Google 对在收件箱或联系人等应用中没有与其帐户相关联的图片的用户所做的。

我希望为名称返回的颜色始终与名称的颜色相同,因此使用随机数是不可能的。

我不想在 #000000 和 #FFFFFF 之间生成十六进制颜色,因为我想控制调色板,并且想限制颜色的数量,所以这个问题的答案是不够的。

有什么想法吗?

【问题讨论】:

  • 嗯.. 您可以尝试的可能性不止一种。您可以允许从有限的预定义颜色列表中进行选择,并使用用户名设置选择的颜色(将其保存在某个数据库中)。
  • 嗯...是关系 1) 一个特定名称 = 一种颜色或 2) 名称中的一个字母 = 颜色定义的一部分? (如果你知道我的意思吗?):)

标签: javascript string algorithm colors


【解决方案1】:

为什么不使用哈希表?

只需创建一些算法来散列一个人的名字,然后根据你想要的颜色长度对其进行修改。例如:

var colours = ['#345321', '#888888', '#000011'];
function generateColour( name ){
    // this is NOT a great hash but serves as an example
    var sum = 0;
    for (var i = 0; i < name.length; i++){
        sum += name.charAt(i);
    }
    return sum % colours.length;
}

console.log( colours[generateColour( "Steve" )] );

快速搜索一下关于字符串散列算法的 Google 会为您提供更好的算法。

【讨论】:

  • 我最终做了这样的事情,但使用的是 charCodeAt。谢谢
  • 使用模是天才!我发现这个例子非常优雅:codepen.io/sergiopedercini/pen/RLJYLj(从字符串计算 HSL 颜色)
【解决方案2】:

将您允许的颜色放入数组中,并使用名称哈希的最后一位从数组中选择颜色。

【讨论】:

    【解决方案3】:

    您需要将字符串散列为一个数字并将该数字缩小为有效的色调色调是调色板中的一个角度,从 0 到 360,因此您只需执行hash % 360 即可获得有效的色调色调。然后,您可以使用 hsl() CSS3 函数hsl(hue, 100%, 50%) 制作颜色。通过固定饱和度和亮度,您将获得更好的效果。这是一个 CSS 函数,所以你必须将它写在一个 JavaScript 字符串中,并将该字符串设置为 CSS 颜色。

    【讨论】:

      猜你喜欢
      • 2021-07-20
      • 2014-12-12
      • 2010-11-12
      • 2018-10-03
      • 1970-01-01
      • 2016-06-28
      • 1970-01-01
      • 2021-12-19
      相关资源
      最近更新 更多