在Particle.js中使用多个图像

时间:2018-01-19 01:19:28

标签: image particles particle.js

我有一个项目,它使用Particle.JS创建一个带有运动图像粒子的画布。我目前遇到的问题是每个图像在已经加载的一段时间后不断重新加载。

config.json

"particles": {
"number": {
  "value": 10,
  "density": {
    "enable": false,
    "value_area": 100
  }
},
"color": {
  "value": "#ffffff"
},
"shape": {
  "type": ["image0", "image1", "image2", "image3", "image4", "image5"],
  "stroke": {
    "width": 0,
    "color": "#000000"
  },
  "polygon": {
    "nb_sides": 5
  },
  "image": {
    "src": "images/0.png",
    "width": 100,
    "height": 100
  }
},

我使用这种情况来过滤掉交换机中的所有图像类型。(pJS.fn.particle.prototype.draw)

particles.js

case (p.shape.match(/image/) || {}).input:
    if(pJS.tmp.img_type == 'svg'){
      var img_obj = p.img.obj;
    }else{
      var img_obj = pJS.tmp.img_obj;
    }
    var element = document.createElement('img');
    var number = p.shape.replace("image", "")
    element.src = './styles/eles/theme/images/particlelogo/'+number+'.png';
    img_obj = element;

    if(img_obj){
      draw();
    }
    break;

Original particle.js github link

0 个答案:

没有答案