Question

我正在尝试修改particles.js，使其周围的屏幕上漂浮着多个不同的图像。

首先使用json配置文件中的数组：

"image": {
        "src":["https://somedomian/IMAGES/mid_logo.png",
               "http://localhost/GID/IMAGES/icons/pc.png"
        ],
        "width": 200,
        "height": 200
      }

然后在particles.js v2.0中，我去到了310行或在那附近

加载非SVG文件的部分

else{

        var img = new Image();

        img.addEventListener('load', function(){
        pJS.tmp.img_obj = img;
        pJS.fn.vendors.checkBeforeDraw();
        });

console.log('pJS src '+pJS.particles.shape.image.src); 
// I can see the array in the console

        img.src = pJS.particles.shape.image.src[0];  
 /////////////// this is loading the first value I want more img

      }

我还更改了第319行的代码部分，在其中创建所有图像，并尝试随机分配图像的来源

    if(this.shape == 'image'){ /// if we have an image type
      var sh = pJS.particles.shape;




    var randomNumber = Math.floor(Math.random()*2); // radom number up to array len

   // getting the right file path in console
   console.log('RADOM SOURCE : '+sh.image.src[randomNumber]);
      this.img = {

        src: sh.image.src[randomNumber], // this used to be sh.image.src  where src was the path from json fonfig ??
        ratio: sh.image.width / sh.image.height
      }
      if(!this.img.ratio) this.img.ratio = 1;
      if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){
        pJS.fn.vendors.createSvgImg(this);
        if(pJS.tmp.pushing){
          this.img.loaded = false;
        }
      }
    }

我在控制台中获得了所有正确的期望值，但只有一个img对象正在播放。

如何创建新图像数组以从数组中随机选择它们？

particle.js中的多个图像对象

0 个答案: