3

我找不到是否可以限制粒子的总数。

有没有办法做到这一点？

粒子.js Github

4

6 回答 6

3

您可以修改particles.js（第750行），在推送功能中添加额外的检查：

/* ---------- 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 作为最大数字，因为它是一个很好的值，不会失去性能。显然，您可以根据需要对其进行修改。

于 2017-08-04T02:37:47.223 回答
2

我在@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;
      }
    }
  }
};
于 2020-03-19T18:07:48.790 回答
1

解决方案可以是（使用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
}
于 2020-08-14T18:17:35.383 回答
0

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

编辑

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

于 2017-01-30T12:53:03.633 回答
0

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

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);
  });
});
于 2018-06-03T20:08:28.407 回答
-2

初始化particleJS时，改变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

于 2017-01-30T11:54:23.957 回答