具有不同图像的粒子.[qml] [英] Particles with different images. [qml]

问题描述

我正在使用粒子系统.我的粒子是从中心出来的，但是我想要不同的图像出来.
这些图像的文件路径存储在数组中.我做了一个函数来进行这种安排，并返回每个位置上的内容.
返回的是每个要发送到 ImageParticle的源的图像的路径.

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.

这是我的代码:

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))
        }
    }             
}

推荐答案

我是问上一个问题的人，在这里我带了答案.
我很清楚，如果您知道我邀请您分享的另一种方法，可以有几种方法来解决问题.
欢迎提供有关回应的建议.

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.

我在这里共享代码:

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'            
            }
        }
    }            
} 

如您所见，文件夹中的所有图像将被输出.
我只需将"ImageParticle" 更改为"ItemParticle" ，然后将"Component" 添加为委托人所在的位置.
因此，我们将不使用数组(在前面的代码中忽略它)，因为现在仅连接了图像的路径和一个随机数(用于选择图像).
希望您能为他们服务，如果您有更好的实施方法，请告诉他们.

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.

这篇关于具有不同图像的粒子.[qml]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！