Particles.js :限制粒子数量
Particles.js :限制粒子数量
提问于 2017-01-30 19:38:02
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-08-04 10:37:47
您可以修改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作为最大值，因为为了不损失性能，它是一个很好的值。显然，您可以根据需要对其进行修改。
Stack Overflow用户
发布于 2020-03-20 02:07:49
我在@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;
}
}
}
};Stack Overflow用户
发布于 2017-01-30 20:53:04
我认为没有办法限制屏幕上的粒子数量，所以我更改了onHover和onClick的属性，这样它就不会添加其他粒子。解决了我的问题。
编辑
这之前被标记为答案，因为当时它解决了我的问题，但不是一个正确的答案。不再标记为答案，因为显然@Nicola Zaltron答案有效！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41934968
复制相关文章
相似问题