Particles with different images. [qml]

问题

I am using particle systems. My particles come out from the center but I want different images to come out.
The file path of these images are stored in an array. I made a function to go through that arrangement and return what is in each position.
What returns is the path of each image to be sent to the source of the ImageParticle.

The problem is that if you scroll through the entire array but only return the path of the last image and logically I get a single image instead of the twenty that are stored in the array.
Someone could help me?
Help and suggestions are well accepted.

Here is my code:

import QtQuick 2.0
import QtQuick.Particles 2.0    

Rectangle {
    id: bg
    width: 1920         //360
    height: 1080            //360
    color: "black"

    ParticleSystem {
        id: particleSys
    }            

    Emitter{
        id: particles
        anchors.centerIn: parent
        height: 1; width: 1
        system: particleSys
        emitRate: 30
        lifeSpan: 4000
        lifeSpanVariation: 500
        maximumEmitted: 1000
        size: 5
        endSize: 200                      

        velocity: TargetDirection{      
            targetX: 100; targetY: 100
            targetVariation: 360
            magnitude: 250
        }            
    }         

    property var picturesList: [
        "images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png", "images/Image5.png", "images/Image6.png", "images/Image7.png", "images/Image8.png", "images/Image9.png", "images/Image10.png",
        "images/Image11.png", "images/Image12.png", "images/Image13.png", "images/Image14.png", "images/Image15.png", "images/Image16.png", "images/Image17.png", "images/Image18.png", "images/Image19.png", "images/Image20.png"
    ]

    function getImage(arr){
        var flag = "";
        for(var i = 0; i < arr.length ; i++){                    
            flag = arr[i];
            console.log("Image: " + arr[i] + " flag: " + flag )   //To check if array is traversing.
        }    
        return flag;
    }

    ImageParticle{            
        property var link: getImage(picturesList)
        source: link
        system: particleSys
    }

    // To check which image is returned.
    MouseArea {  
        anchors.fill: parent
        onClicked: {
            console.log(getImage(picturesList))
        }
    }             
}

回答1:

I am the person who asked the previous question and here I bring the answer.
I know very well that there can be several ways that solve the problem, if you know another way I invite you to share it.
Suggestions about the response are welcome.

Here I share the code:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    id: bg
    width: 1920         
    height: 1080        
    color: "black"

    ParticleSystem {
        id: particleSys
    }           

    Emitter{
        id: particles
        anchors.centerIn: parent
        height: 1; width: 1
        system: particleSys
        emitRate: 30
        lifeSpan: 4000
        lifeSpanVariation: 500
        maximumEmitted: 1000
        size: 5
        endSize: 200                          

        velocity: TargetDirection{      //4
            targetX: 100; targetY: 100
            targetVariation: 360
            magnitude: 250
        }            
    }         
    property var picturesList: [
        "images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png", "images/Image5.png", "images/Image6.png", "images/Image7.png", "images/Image8.png", "images/Image9.png", "images/Image10.png",
        "images/Image11.png", "images/Image12.png", "images/Image13.png", "images/Image14.png", "images/Image15.png", "images/Image16.png", "images/Image17.png", "images/Image18.png", "images/Image19.png", "images/Image20.png"
    ]          

    ItemParticle {
        id: particle
        system: particleSys
        delegate: itemDelegate
    }

    Component {
        id: itemDelegate
        Rectangle {
            id: container
            width: 26*Math.ceil(Math.random()*3); height: width
            color: 'white'
            Image {
                anchors.fill: parent
                anchors.margins: 3
                source: 'images/Image'+Math.ceil(Math.random()*20)+'.png'            
            }
        }
    }            
}

As you can see, all the images in the folder will be output.
I simply change the "ImageParticle" to "ItemParticle" and I add a "Component" as a delegate where the desired image will be.
So we would not use the array (omit it in the previous code) since now only the path of the image is concatenated and a random number (to select the image).
I hope you serve them, and if you have a better implementation, please let them know.

来源：https://stackoverflow.com/questions/44763623/particles-with-different-images-qml

标签

image

qml

particles