Question

我想下载多张我上传到服务器的图片，并在我的场景中以图库或幻灯片形式显示。我已经完成了下面的代码来下载图像但我只能显示一个图像。如何显示从服务器下载的多个图像？

public void DownloadtheFiles()
    {

    List <string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++) {

        new GetUploadedRequest()

            .SetUploadId(photolist[i])
            .Send((response) =>
                {
                    StartCoroutine(DownloadImages(response.Url));
                } );
    }
    }

    public IEnumerator DownloadImages(string downloadUrl)
    {
        var www = new WWW(downloadUrl);
        yield return www;
        downloadedImages = new Texture2D(200, 200);
        www.LoadImageIntoTexture(downloadedImages);
        imageLoaded.texture = downloadedImages as Texture;
    }

更新1：使用下面的代码我展示了我是如何展示它们但它从文件夹路径获取图像，我需要显示我从服务器下载的图像。如何集成此代码以使用下载的图像制作幻灯片？

public class ImageLoader : MonoBehaviour
{
[SerializeField]
[Tooltip("The folder where images will be loaded from")]
private string imagePath;

[SerializeField]
[Tooltip("The panel where new images will be added as children")]
private RectTransform content;

private List<Texture2D> textures;

private void Start()
{
    Application.runInBackground = true;
    StartCoroutine(LoadImages());
}

public IEnumerator LoadImages()
{
    textures = new List<Texture2D>();

    DirectoryInfo di = new DirectoryInfo(imagePath);
    var files = di.GetFiles("*.png");

    foreach (var file in files)
    {
        Debug.Log(file.FullName);
        yield return LoadTextureAsync(file.FullName, AddLoadedTextureToCollection);
    }

    CreateImages();
}

private void AddLoadedTextureToCollection(Texture2D texture)
{
    textures.Add(texture);
}

private void CreateImages()
{
    foreach(var texture in textures)
    {
        GameObject imageObject = new GameObject("Image");
        imageObject.transform.SetParent(content);
        imageObject.AddComponent<Image>().sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
    }
}

public IEnumerator LoadTextureAsync(string originalFileName, Action<Texture2D> result)
{
    string fileToLoad = GetCleanFileName(originalFileName);

    Debug.Log("Loading Image from path: " + fileToLoad);

    WWW www = new WWW(fileToLoad);
    yield return www;

    Texture2D loadedTexture = new Texture2D(1, 1);

    www.LoadImageIntoTexture(loadedTexture);

    result(loadedTexture);
}

private static string GetCleanFileName(string originalFileName)
{
    string fileToLoad = originalFileName.Replace('\\', '/');

    if (fileToLoad.StartsWith("http") == false)
    {
        fileToLoad = string.Format("file://{0}", fileToLoad);
    }

    return fileToLoad;
}
}

更新2：我已经创建了一个ScrollView和HorizonatalLayoutGroup，并且我已经应用了UPDATE 1的ImageLoader.cs。我在文件夹中添加了4个图像，这些是截图层次结构和结果：

它作为测试工作正常，但图像的来源是我的电脑中的文件夹，我想下载服务器的图像。我该怎么办？

Answer 1

您已使用ScrollView和HorizonatalLayoutGroup完成了所有必需的部分。请注意，我要求您使用RawImage组件，但似乎您使用的是Image组件。我建议使用RawImage因为您可以避免使用昂贵的Sprite.Create。如果需要，您仍然可以使用Image。

您现在唯一要做的就是调整RawImage的大小，直到您对其大小感到满意为止。从RawImage创建一个预制件。删除Content GameObject下的Image / RawImage。你不再需要它们了。

现在，从服务器下载图像，从RawImage预制件中实例化预制件。 最后，让RawImage成为内容游戏对象的孩子。这就是它。 HorizonatalLayoutGroup应自动定位。

使用原始代码，下面是如何做到这一点。 contentRef变量是对ScrollView下的Content GameObject的引用。 imgPrefab变量是对RawImage预制件的引用。确保从编辑器中分配两者。另外，请注意我添加和使用新int index = i;变量以防止capturing i变量并导致其仅下载最后一张图像。

public GameObject contentRef;
public RawImage imgPrefab;

void Start()
{
    DownloadtheFiles();
}

public void DownloadtheFiles()
{

    List<string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++)
    {
        //Don't capture i variable
        int index = i;

        new GetUploadedRequest()

            .SetUploadId(photolist[index])
            .Send((response) =>
            {
                StartCoroutine(DownloadImages(response.Url, index));
            });
    }
}


public IEnumerator DownloadImages(string downloadUrl, int index)
{
    var www = new WWW(downloadUrl);
    yield return www;

    //Instantiate the image prefab GameObject and make it a child of the contentRef
    RawImage newImg = Instantiate(imgPrefab, contentRef.transform);
    //Change the name
    newImg.name = "Image-" + index;

    //Get the downloaded image
    Texture2D tex = new Texture2D(4, 4);
    www.LoadImageIntoTexture(tex);

    //Apply the downloaded image
    newImg.texture = tex;
}

显示从服务器下载的多个图像

1 个答案: