在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)