给定这个函数,我想用随机颜色生成器替换颜色。

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

我该怎么做呢?


当前回答

Use:

function random_color(format)
{
    var rint = Math.round(0xffffff * Math.random());
    switch(format)
    {
        case 'hex':
            return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
            break;

        case 'rgb':
            return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
            break;

        default:
            return rint;
            break;
    }
}

升级版:

function random_color( format ){
  var rint = Math.floor( 0x100000000 * Math.random());
  switch( format ){
    case 'hex':
      return '#' + ('00000'   + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb('  + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
    default:
      return rint;
  }
}

其他回答

您可以使用colorchain.js生成具有不同色调的颜色序列。

JS中的随机rgb颜色

const getRandomArbitrary = (min, max) => parseInt(Math.random() * (max - min) + min, 10)

const generateRandomRGBColor = () => 
    `rgb(${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)})`;

// generateRandomRGBColor()

或者你可以使用在线工具来生成调色板-我已经为此目的建立了https://colorswall.com/palette/generate。

一个简短的答案,有精确大小的填充:

'#' + ((1<<24)*(Math.random()+1)|0).toString(16).substr(1)
var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

它是如何工作的:

Math.random()*256获取一个从0到256(包括0到255)的随机(浮点数)数字 示例结果:116.15200161933899

加上|0就把小数点后的数都去掉了。 例:116.15200161933899 -> 116

使用. tostring(16)将此数字转换为十六进制(以16为基数)。 例:116 -> 74 另一个例子:228 -> e4

加上“0”,它就变成了零。这在我们获取子字符串时很重要,因为我们的最终结果每种颜色必须有两个字符。 例:74 -> 074 另一个例子:8 -> 08

.substr(-2)只获取最后两个字符。 例:074 -> 74 另一个例子:08 -> 08(如果我们没有添加“0”,这将产生“8”而不是“08”)

for循环运行此循环三次,将每个结果添加到颜色字符串中,产生如下内容: # 7408 e4

下面是对这个问题的另一种看法。

我的目标是创造充满活力和独特的颜色。为了确保颜色的不同,我避免使用随机生成器,并从彩虹中选择“均匀间隔”的颜色。

这非常适合在谷歌map中创建具有最佳“唯一性”(即没有两个标记具有相似的颜色)的弹出式标记。

/**
 * @param numOfSteps: Total number steps to get color, means total colors
 * @param step: The step number, means the order of the color
 */
function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

如果您希望看到这看起来像在行动,请参阅简单JavaScript彩虹颜色生成器谷歌地图标记。