为 AngularJS 中的用户个人资料分配独特的颜色

Question

我们想在 angularJS,NodeJs, MongoDB 应用程序中为配置文件用户分配一种独特的颜色。这个想法是能够分配和识别具有独特颜色的用户列表（100 或更多）。

有什么想法吗？

Answer 1

在我看来，这个想法是计算以数学和可重现的方式计算颜色。好处是不必将此颜色存储在数据库中，而是让您的应用程序计算它：

选择一些非常独特的东西，可以将用户 ID 和用户名连接起来。
您计算字符串哈希，然后将哈希转换为数字。
您选择一个颜色列表，然后将颜色与哈希值相关联。

这是一个fiddle

//HASH FUNCTION
String.prototype.hashCode = function() {
  let hash = 0, i, chr, len;
  if (this.length === 0) return hash;
  for (i = 0, len = this.length; i < len; i++) {
    chr   = this.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
};

let users = [
    {id: 111, name: 'John Doe'},
    {id: 220, name: 'John Doe'},
    {id: 305, name: 'John Doe'},
    {id: 306, name: 'John Doe'},
    {id: 310, name: 'Jane Doe'},
    {id: 315, name: 'Jane Doe'},
    {id: 320, name: 'Jane Doe'}
];
let hashes = [];

users.map((user) => {
    //CALCULATE HASH
    let hash = (user.id + user.name).hashCode() + '';

    //CONVERT HASH TO NUMBER
    let total = 0;
    for (let i = 0; i < hash.length; i++) {
        if (Number(hash[i])) {
          total += Number(hash[i]);
        }
    }
    hashes.push(total);
});

//PICK YOUR COLORS
let colors = ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C', '#FF8A80', '#FF5252', '#FF1744', '#D50000', '#FCE4EC', '#F8BBD0', '#F48FB1', '#F06292', '#EC407A', '#E91E63', '#D81B60', '#C2185B', '#AD1457', '#880E4F', '#FF80AB', '#FF4081', '#F50057', '#C51162', '#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C', '#EA80FC', '#E040FB', '#D500F9', '#AA00FF', '#EDE7F6', '#D1C4E9', '#B39DDB', '#9575CD', '#7E57C2', '#673AB7', '#5E35B1', '#512DA8', '#4527A0', '#311B92', '#B388FF', '#7C4DFF', '#651FFF', '#6200EA', '#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E', '#8C9EFF', '#536DFE', '#3D5AFE', '#304FFE', '#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3', '#1E88E5', '#1976D2', '#1565C0', '#0D47A1', '#82B1FF', '#448AFF', '#2979FF', '#2962FF', '#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B', '#80D8FF', '#40C4FF', '#00B0FF', '#0091EA', '#E0F7FA', '#B2EBF2', '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4', '#00ACC1', '#0097A7', '#00838F', '#006064', '#84FFFF', '#18FFFF', '#00E5FF', '#00B8D4', '#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40', '#A7FFEB', '#64FFDA', '#1DE9B6', '#00BFA5'];

//ASSOCIATE COLOR AND USER
let result = [];
hashes.map((item, i) => {
    let person = {
        name: users[i].name,
        color: colors[item % colors.length]
    }
    result.push(person);
});

希望它能给你一些想法:)

为 AngularJS 中的用户个人资料分配独特的颜色

Assign unique color to user profiles in AngularJS

angularjs

color-picker

user-profile