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 ：我创建了一个小提琴：https://jsfiddle.net/85djnk85/5/以供参考。

在downvoting之前，如果您需要任何其他信息，请告知我们。）

Answer 1

这应该有用，它会检查h vs r值等。

＆＃13;

var item = {
  prop: {
    "color": {
      "value": {
        h: 356, // or r: 356
        s: 76, // or: s: 76
        l: 41 // or b: 41
      }
    }
  }
}

colorresult = {};
var color = item.prop.color;
if ((color.value.h || color.value.b) && (color.value.s || color.value.g)&& (color.value.l || color.value.b)) {
  colorresult.rgb = {
    r: color.value.h || color.value.r,
    g: color.value.s || color.value.g,
    b: color.value.l || color.value.b
  }
}

console.log(colorresult)

＆＃13;

Answer 2

您的代码很好，但Particles.js代码中存在一个错误，它将您的设置应用于默认值之上。

如果您使用Partific.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"}}。

一样

但是当源有一个Object，其中目标有一个字符串（就像你的例子，源代码是{color: {value: {r:182, g:25, b:36}而目的地（默认）有{color: {value: "#fff"}}），它的逻辑就会崩溃。

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

destination[property] = source[property];

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

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

没错，它在字符串＆＃34; #ffff＆＃34;上设置r属性。这显然不是你想要的行为： - ）

重要的是，这意味着图书馆的文档和图书馆的代码彼此不一致......几乎就是错误的定义。我推荐filing an issue并尝试找出另一种方法来获取你的颜色（一种方法是使用你自己的Particles.js副本并删除默认颜色）。

Answer 3

您需要查看以下链接

http://www.softarc.com/Resources/Tips/ExternalApps/Resources/TemplateDocs/lessons/Using_JSON_strings_to_store_data.html

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

3 个答案: