在 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)); returns string 最后两种情况。

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

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

Answer 1

你需要看下面的link

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

Answer 2

这应该可以，它会检查 h 与 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)

Answer 3

您的代码没有问题，但 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 副本并删除默认颜色）。

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

Using RGB and HSL color objects in Particles.js

javascript

javascript-objects