javascript - 在 Particles.js 中使用 RGB 和 HSL 颜色对象

Question

我正在使用这个库:https://github.com/VincentGarreau/particles.js/blob/master/particles.js

在前几行(从第 15 行开始)，开发人员设置了一些默认值，例如:

this.pJS = {
canvas: {
  el: canvas_el,
  w: canvas_el.offsetWidth,
  h: canvas_el.offsetHeight
},
particles: {
  number: {
    value: 400,
    density: {
      enable: true,
      value_area: 800
    }
  },
  color: {
    value: '#fff'
  },

稍后，在第 269 行附近，开发人员检查颜色值是否合适:

this.color = {};
if(typeof(color.value) == 'object'){

  if(color.value instanceof Array){
    var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
    this.color.rgb = hexToRgb(color_selected);
  }else{
    if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){
      this.color.rgb = {
        r: color.value.r,
        g: color.value.g,
        b: color.value.b
      }
    }

库的用户可以像这样在 JSON 文件中设置所有这些选项 (https://github.com/VincentGarreau/particles.js):

{
"particles": {
"number": {
  "value": 80,
  "density": {
    "enable": true,
    "value_area": 800
  }
},
"color": {
  "value": "#ffffff"
},

可以通过多种方式设置颜色，如下图所示:

如果我这样设置颜色:

"color": {
  "value": "#f00" // It works
}

"color": {
  "value": ["#00f","#A69","#CA1"] // It works
}

"color": {
  "value": "random" // It works
}

"color": {
  "value": {r:182, g:25, b:36} // Does not work
}

"color": {
  "value": {h:356, s:76, l:41} // Does not work
}

如何正确设置 RGB 和 HSL 格式的颜色？

更新:alert(typeof(color.value)); 在最后两种情况下返回 string。

更新 2:我创建了一个 fiddle :https://jsfiddle.net/85djnk85/5/供引用。

在投票之前，如果您需要任何其他信息，请告诉我:)

Answer 1

您的代码没有问题，但 Particles.js 代码中存在错误，该错误会在默认设置之上应用您的设置。

如果您使用非缩小版本的 Particles.js，您可以添加使用调试器在它应用您的设置之前观察值 (lines 139-141):

/* params settings */
if(params){
  Object.deepExtend(pJS, params);
}

Object.deepExtend 将值从一个对象递归地复制到另一个对象。它被定义为 further down in the same file :

Object.deepExtend = function(destination, source) {
  for (var property in source) {
    if (source[property] && source[property].constructor &&
     source[property].constructor === Object) {
      destination[property] = destination[property] || {};
      arguments.callee(destination[property], source[property]);
    } else {
      destination[property] = source[property];
    }
  }
  return destination;
};

当源和目标具有相同的形状时，这很好用，就像这两个:

var destination =
{
  old: "no change",
  shared: "default"
},
source =
{
   shared: "override",
   new: "added"
}
Object.deepExtend(destination, source);

/* `destination` will now look like this: 
{
   old: "no change",
   shared: "override",
   new: "added"
}
*/

源中的一个字符串，目标中的一个字符串。就像您的 {color: {value: "#f00"}} 示例覆盖了默认的 {color: {value: "#fff"}}。

但是当源有一个目标有一个字符串的对象时(就像你的例子，源说 {color: {value: {r:182, g:25, b:36}并且目的地(默认)有 {color: {value: "#fff"}}，它的逻辑崩溃了。

特别是，控制最终达到Line 1423 :

destination[property] = source[property];

那时，destination 被设置为一个普通字符串，所以它做了一些很奇怪的事情:

"#fff"["r"] = 182;

没错，它在字符串“#fff”上设置了r 属性。这显然不是您想要的行为:-)

重要的是，这意味着库的文档和库的代码彼此不一致……几乎是错误的定义。我推荐 filing an issue并且可能会尝试找出另一种方法来让你的颜色在那里(一种方法是使用你自己的 Particles.js 副本并删除默认颜色)。