0

Доброго времени суток! У меня появилась очень серьёзная проблема.Дело в том, что я не могу вывести много изображений(imageView).Для того, чтобы вывести изображение, мне нужно создать новый экземпляр класса ImageView. Но когда я пытаюсь создать множество(больше 200) таких объектов и запихнуть их в ArrayList, то вылетает OutOfMemoryError. Пожалуйста, подскажите что с этим делать, может есть какой-то другой способ вывести множество изображений при помощи javafx? P.S Множество изображений нужно для создания карты для игры

1 ответ 1

1

Для того, чтобы отобразить 200+ изображений, не обязательно создавать 200+ экземпляров ImageView. Дело в том, что ImageView — пользовательский элемент управления (Control) и всего лишь является контейнером для изображений. Его основное предназначение не в том, чтобы хранить данные, а в том, чтобы представлять их пользователю. Как только мы начинаем рассматривать данный класс как контейнер для изображений, сразу же возникают два вопроса: как изображения в этом контейнере отображать и как обойтись минимальным количеством контейнеров с целью экономии ресурсов.

Для демонстрации общего случая годится класс ListView.

Пример работы ListView

Положим, необходимо отобразить массив строк вида strings = [item 1, item 2, ...], с использованием класса ListView и контейнера TextView по порядку их расположения в массиве. Таким образом в видимой области экрана единовременно находятся семь контейнеров (серые прямоугольники). В начальном состоянии каждый из семи контейнеров отображает одну строку из массива по индексам 0-6.

При прокрутке снизу вверх самый верхний контейнер перестает быть видимым (1), после чего ListView берет данные следующего по порядку элемента из массива и отображает их в этом контейнере (2). Далее контейнер снова отображается на экране (3), но уже снизу и с новыми данными. Таким образом сколько бы ни было строк (сравнительно небольших по объему) в массиве strings, в памяти всегда будет находиться минимально необходимое количество контейнеров (сравнительно больших) для их отображения — в данном примере семь. При этом "логикой перестановки" контейнеров занимается сам ListView.

Исходя из Вашего вопроса предположу, что для отображения карты Вы планируете использовать общепринятую модель пользовательского взаимодействия — горизонтальная и вертикальная прокрутка, при этом сама карта состоит из множества квадратных изображений. Из этого вытекает необходимость использовать контейнер, который способен отображать сетку контролов и вести себя с ними так же, как и ListView. Насколько мне известно, подходящего класса нет в стандартном пакете javafx, однако он есть в библиотеке ControlsFX и называется он GridView.

Пример отображения 500-сот изображений в GridView только с вертикальной прокруткой

Скриншот программы

Main.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application{
    public static void main(String[] args){
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception{
        FXMLLoader loader = new FXMLLoader(getClass().getResource("MainView.fxml"));

        Parent root = loader.load();
        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

MainController.java

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.Initializable;
import org.controlsfx.control.GridView;

import java.net.URL;
import java.util.ResourceBundle;

public class MainController implements Initializable{
    //контейнер для всей карты
    public GridView<MapTile> gridView;

    //класс-посредник, отображающий URL изображения в ImageView
    public ImagesAdapter gridViewAdapter;

    //Все изображения, составляющие карту
    private ObservableList<MapTile> mapTiles = createData();

    @Override
    public void initialize(URL location, ResourceBundle resources){
        gridViewAdapter = new ImagesAdapter(gridView);
        gridViewAdapter.setData(mapTiles);
    }

    //Создадим ссылки на 500 изображений с номерами от 1 до 500 для демонстрации
    private ObservableList<MapTile> createData(){
        ObservableList<MapTile> tiles = FXCollections.observableArrayList();
        for(int i = 1; i <= 500; i++){
            tiles.add(new MapTile("http://via.placeholder.com/300?text=" + i));
        }
        return tiles;
    }
}

ImagesAdapter.java

import javafx.collections.ObservableList;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.Pane;
import javafx.util.Callback;
import org.controlsfx.control.GridCell;
import org.controlsfx.control.GridView;

import java.io.IOException;

//Класс служит для передачи объектов MapTile в GridView (через GridCell)
class ImagesAdapter{
    //счетчик созданных ячеек GridView
    private static int cellCounter = 0;

    private final GridView<MapTile> mapView;

    public ImagesAdapter(GridView<MapTile> mapView){
        this.mapView = mapView;
        //Фабрика, создающая новые ImageCell при необходимости
        mapView.setCellFactory(new Callback<GridView<MapTile>, GridCell<MapTile>>(){
            @Override
            public GridCell<MapTile> call(GridView<MapTile> param){
                return new ImageCell();
            }
        });
    }

    public void setData(ObservableList<MapTile> mapTiles){
        mapView.setItems(mapTiles);
    }

    //одна ячейка GridView
    class ImageCell extends GridCell<MapTile>{
        //ImageView, отображающийся в ячейке
        private ImageCellView viewController;

        ImageCell(){
            //Создаем ImageView для ячейки
            FXMLLoader loader = new FXMLLoader(getClass().getResource("ImageCellView.fxml"));
            try {
                Pane root = loader.load();
                viewController = loader.getController();
                viewController.root = root;
            } catch (IOException e) {
                e.printStackTrace();
            }

            //При очень быстрой прокрутке может создаваться дополнительное количество ячеек
            //В java заруднительно учесть удаление объекта, поэтому счетчик при быстрой
            //прокрутке будет показывать большее количество объектов, чем при медленной.
            //Тем не менее в MemoryView при установке Breakpoint'a на данное выражение
            //всегда будет видно реальное количество используемых ImageCell (ImageView)
            System.out.println("Created new ImageCell: " + cellCounter++);
        }

        @Override
        protected void updateItem(MapTile item, boolean empty){
            super.updateItem(item, empty);

            //Здесь необходимо либо очистить ячейку, либо отобразить в ней новые данные

            if (empty || item == null) {
                //чистим
                setGraphic(null);
                viewController.clear();
            } else {
                //кладем новое изображение
                viewController.update(item.getUrl());
                setGraphic(viewController.root);
            }
        }
    }
}

ImageCellView.java

import javafx.fxml.Initializable;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;

import java.net.URL;
import java.util.ResourceBundle;

//ImageView с небольшой обвязкой для отображения в ячейке GridView
public class ImageCellView implements Initializable{
    public Pane root;
    public ImageView loadedImage;

    @Override
    public void initialize(URL location, ResourceBundle resources){
        //no-op
    }

    //Метод для удаления старых данных
    public void clear(){
        loadedImage.getImage().cancel();
        loadedImage.setImage(null);
    }

    //Метод для отображения новых данных
    public void update(String url){
        loadedImage.setImage(new Image(url, true));
    }
}

MapTile.java

//Класс для хранения информации об одном кусочке карты
public class MapTile{
    //Ссылка на изображение
    private String tileUrl;

    public MapTile(String url){
        this.tileUrl = url;
    }

    public String getUrl(){
        return tileUrl;
    }
}

MainView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import org.controlsfx.control.GridView?>
<HBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="MainController"
      prefHeight="400.0"
      prefWidth="600.0">

    <GridView fx:id="gridView"
              prefHeight="400.0"
              prefWidth="600.0"/>

</HBox>

ImageCellView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.Pane?>
<Pane xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="ImageCellView"
      prefHeight="400.0"
      prefWidth="600.0">

    <ImageView fx:id="loadedImage"
               fitHeight="100.0"
               fitWidth="100.0"/>

</Pane>
8
  • А что делать, если я хочу разом вывести 200+ картинок(без прокрутки),размер тайла 16x16, а размер окна 320x320, т.е. получается 20 тайлов в ширину, 20 тайлов в высоту? Для этого есть какой-нибудь способ? А может я вообще выбрал не подходящую библиотеку для создания игры? 8 авг 2017 в 14:45
  • Я попробовал бы использовать для этого Canvas, отрисовывая на нем объекты Image по координатам 8 авг 2017 в 14:56
  • А вы бы могли скинуть какой-нибудь код для примера? 8 авг 2017 в 16:03
  • @ПавелЧемармазович, вот здесь есть пример отрисовки изображений на Canvas stackoverflow.com/questions/28100060/…, работу с opacity в нем можно опустить. 8 авг 2017 в 19:28
  • Да, но проблема в том,что при помощи метода drawImage() можно отрисовать только объект типа Image,а не ImageView( Может вы посоветуете какие-нибудь другие библиотеки для работы с графикой? 8 авг 2017 в 20:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.