修改

Question

我无法找到是否可以限制粒子总数。

有没有办法做到这一点？

Answer 1

我在@Nicola Zaltron的解决方案上添加了一些内容，它通过根据屏幕宽度确定粒子的限制来响应屏幕尺寸，并且在较小的屏幕上这样做不会影响性能。

/* ---------- pJS functions - modes events ------------ */

pJS.fn.modes.pushParticles = function(nb, pos){

  pJS.tmp.pushing = true;

  var limitNumOfParticles = Math.floor(pJS.canvas.el.width / 20);

  if(pJS.particles.array.length < limitNumOfParticles){

    // console.log("limit: ", limitNumOfParticles);
    // console.log("array: ", pJS.particles.array.length);

    for(var i = 0; i < nb; i++){
      pJS.particles.array.push(
        new pJS.fn.particle(
          pJS.particles.color,
          pJS.particles.opacity.value,
          {
            'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
            'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
          }
        )
      )
      if(i == nb-1){
        if(!pJS.particles.move.enable){
          pJS.fn.particlesDraw();
        }
        pJS.tmp.pushing = false;
      }
    }
  }
};

Answer 2

您可以修改particles.js（第750行），在push函数中添加一个额外的检查：

/* ---------- pJS functions - modes events ------------ */

  pJS.fn.modes.pushParticles = function(nb, pos){

    pJS.tmp.pushing = true;

    if(pJS.particles.array.length<140){
        for(var i = 0; i < nb; i++){
          pJS.particles.array.push(
            new pJS.fn.particle(
              pJS.particles.color,
              pJS.particles.opacity.value,
              {
                'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
                'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
              }
            )
          )
          if(i == nb-1){
            if(!pJS.particles.move.enable){
              pJS.fn.particlesDraw();
            }
            pJS.tmp.pushing = false;
          }
        }
    }

  };

我使用140作为最大数字，因为它是一个很好的值，以便不失去性能。显然你可以根据需要修改它。

Answer 3

解决方案可以是（使用 javascript ）：

// Get total particles
let particles = window['pJSDom'][0].pJS.particles.array.length

// Here set limit value
if(particles == 25){
  // Get particles array
  let array = window['pJSDom'][0].pJS.particles.array
  // Remove (starting from zero) 16 particles starting from 5
  array.splice(5,15)
  // Set new particles array
  window['pJSDom'][0].pJS.particles.array = array
}

Answer 4

初始化粒子JS时，更改number.value的值以限制粒子数

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": <change this to limit number of particles>,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
     ......
   }

查看实际操作：http://codepen.io/anon/pen/ggoRXy

Answer 5

我认为没有办法限制屏幕上的粒子数量，因此我更改了onHover和onClick的属性，因此它不会添加其他粒子。解决了我的问题...

修改

这之前被标记为答案，因为当时它解决了我的问题，但不是一个正确的答案。不再标记为答案，因为显然@Nicola Zaltron回答有效！

Answer 6

我找到了一个很好的解决方案！这是简单的代码：

const maxParticles = 60;
particlesJS.load('particles', './assets/particlesjs.json', () => {
  const pJSIndex = 0;
  const pJS = pJSDom[pJSIndex].pJS;
  pJS.particles.array.splice(0, pJS.particles.array.length - maxParticles);
  pJS.interactivity.el.addEventListener('click', () => {
    pJS.particles.array.splice(0, pJS.particles.array.length - maxParticles);
  });
});

Particles.js：限制粒子数

6 个答案:

修改