给定这个函数,我想用随机颜色生成器替换颜色。
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
我该怎么做呢?
给定这个函数,我想用随机颜色生成器替换颜色。
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
我该怎么做呢?
当前回答
下面是@Anatoliy提供的解决方案。
我只需要生成浅色(作为背景),所以我使用了三个字母(#AAA)格式:
function get_random_color() {
var letters = 'ABCDE'.split('');
var color = '#';
for (var i=0; i<3; i++ ) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
其他回答
投票最多的回答表明,Martin Ankerl的方法比随机十六进制数字更好,尽管我还没有改进Ankerl的方法,但我已经成功地将其翻译成JavaScript。
我想我应该对这个已经非常大的Stack Overflow问题发布一个额外的答案,因为顶部的答案有另一个评论链接到一个带有Ankerl逻辑的JavaScript实现的Gist,而这个链接是坏的(404)。如果我有这样的声誉,我就会简单地注释我创建的jsbin链接。
// Adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
return (rgb && rgb.length === 3) ? "#" +
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}
// The next two methods are converted from Ruby to JavaScript.
// It is sourced from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
const h_i = Math.floor(h*6)
const f = h*6 - h_i
const p = v * (1 - s)
const q = v * (1 - (f * s))
const t = v * (1 - (1 - f) * s)
let r, g, b
switch(h_i) {
case(0):
[r, g, b] = [v, t, p]
break
case(1):
[r, g, b] = [q, v, p]
break
case(2):
[r, g, b] = [p, v, t]
break
case(3):
[r, g, b] = [p, q, v]
break
case(4):
[r, g, b] = [t, p, v]
break
case(5):
[r, g, b] = [v, p, q]
break
}
return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}
// # Use the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a random start value
const gen_hex = (numberOfColors) => {
const colorArray = []
while (numberOfColors > 0) {
h += golden_ratio_conjugate
h %= 1
colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
numberOfColors -= 1
}
console.log(colorArray)
return colorArray
}
gen_hex(100)
https://jsbin.com/qeyevoj/edit?js,console
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;
}
}
下面是@Anatoliy提供的解决方案。
我只需要生成浅色(作为背景),所以我使用了三个字母(#AAA)格式:
function get_random_color() {
var letters = 'ABCDE'.split('');
var color = '#';
for (var i=0; i<3; i++ ) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
function randomColor(format = 'hex') {
const rnd = Math.random().toString(16).slice(-6);
if (format === 'hex') {
return '#' + rnd;
}
if (format === 'rgb') {
const [r, g, b] = rnd.match(/.{2}/g).map(c=>parseInt(c, 16));
return `rgb(${r}, ${g}, ${b})`;
}
}
我想创造非常独特和充满活力的颜色(用于绘图)。对于任何严重的问题,hsl是一个比rgb更好的方法。如有必要,您可以像其他人已经提到的那样将hsl转换为rgb。
简单的方法:
创建一个从0到360的随机色调 创建一个从0.5到1(或50到100)的随机饱和度 将亮度设置为50%以获得最佳能见度。
color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)
修改方法
它创造了一个非常明亮和生动的颜色光谱,但问题是,在通常的颜色光谱中,红色、绿色、蓝色比黄色、青色和紫色更占主导地位。我通过acos函数变换了色调。技术原因很无聊,所以我跳过了,但你可以在维基上挖掘。
color_generator = () => {
let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
let hue = 120*color_section + 120*transformed_hue
return hsl(hue, 0.5 + Math.random()/2, 0.5)
}
在尝试了许多其他方法后,这是我得到的最好的色谱。
引用:
https://observablehq.com/@d3/color-schemes https://en.wikipedia.org/wiki/HSL_and_HSV