Particles.js 中的多个图像作为形状

Question

我正在使用 Particles.js（参见此处：https://github.com/VincentGarreau/particles.js/ or http://vincentgarreau.com/particles.js/）进行设计项目。

是否可以有多个图像 'shapes'，不同 'image.src'？如果是这样，我该怎么做呢？

谢谢

Answer 1

是的，这是可能的。请参阅 https://www.josh.ai/（这不是我的网站，但它可以满足您的需求）。

查看源代码，但更具体地说，我认为他修改了 particles.js 文件：https://www.josh.ai/static/js/particles.min.js

看看这部分代码：

switch (i.canvas.ctx.fillStyle = n, i.canvas.ctx.beginPath(), a.shape) {
            case "circle":
                i.canvas.ctx.arc(a.x, a.y, t, 0, 2 * Math.PI, !1);
                break;
            case "edge":
                i.canvas.ctx.rect(a.x - t, a.y - t, 2 * t, 2 * t);
                break;
            case "triangle":
                i.fn.vendors.drawShape(i.canvas.ctx, a.x - t, a.y + t / 1.66, 2 * t, 3, 2);
                break;
            case "polygon":
                i.fn.vendors.drawShape(i.canvas.ctx, a.x - t / (i.particles.shape.polygon.nb_sides / 3.5), a.y - t / .76, 2.66 * t / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 1);
                break;
            case "star":
                i.fn.vendors.drawShape(i.canvas.ctx, a.x - 2 * t / (i.particles.shape.polygon.nb_sides / 4), a.y - t / 1.52, 2 * t * 2.66 / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 2);
                break;
            case "image":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                r && e()
                break;
            case "image2":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex2a.png';
                r = element;
                r && e()
                break;
            case "image3":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex3a.png';
                r = element;
                r && e()
                break;
             case "image4":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex4a.png';
                r = element;
                r && e()   
                break;
            case "image5":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex5a.png';
                r = element;
                r && e()
                break;
            case "image6":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex6a.png';
                r = element;
                r && e()
                break;
             case "image7":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex7a.png';
                r = element;
                r && e() 
                break;
            case "image8":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex8a.png';
                r = element;
                r && e()
                break;
            case "image9":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex9a.png';
                r = element;
                r && e()
                break;
             case "image10":
                if ("svg" == i.tmp.img_type) var r = a.img.obj;
                else var r = i.tmp.img_obj;
                var element = document.createElement('img');
                element.src = 'https://s3.amazonaws.com/josh.ai/hex10a.png';
                r = element;
                r && e() 
        }

image1、image2 等的每个案例 link 到不同的 png 文件。如果您仍然感兴趣，我想看看那个人的代码应该会让您有所了解。

Particles.js 中的多个图像作为形状

Multiple Images as Shapes in Particles.js

javascript

particles

particle-system