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

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

Answer 1

您的代码很好，但Particles.js代码中存在一个错误，它将您的设置应用于默认值之上。如果您使用Partific.js的非缩小版本，则可以添加使用调试器在应用设置之前观察值（第139-141行）：/* params settings */if(params){   Object.deepExtend(pJS, params);}Object.deepExtend以递归方式将值从一个对象复制到另一个对象。它在同一个文件中进一步定义：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"}}，它的逻辑就会崩溃。特别是，控制最终到达第1423行：destination[property] = source[property];到那个时候，destination设置为一个普通的字符串，所以它做了一些非常奇怪的事情："#fff"["r"] = 182;没错，它r在字符串“#fff”上设置属性。这显然不是你想要的行为:-)重要的是，这意味着库的文档和库的代码彼此不一致......几乎就是bug的定义。我建议提交一个问题，并试图找出另一种方法来获取你的颜色（一种方法是使用你自己的Particles.js副本并删除默认颜色）。

Answer 2

这应该工作，它检查h vs r值等。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)