Доброго времени суток! У меня появилась очень серьёзная проблема.Дело в том, что я не могу вывести много изображений(imageView).Для того, чтобы вывести изображение, мне нужно создать новый экземпляр класса ImageView. Но когда я пытаюсь создать множество(больше 200) таких объектов и запихнуть их в ArrayList, то вылетает OutOfMemoryError. Пожалуйста, подскажите что с этим делать, может есть какой-то другой способ вывести множество изображений при помощи javafx? P.S Множество изображений нужно для создания карты для игры
1 ответ
Для того, чтобы отобразить 200+ изображений, не обязательно создавать 200+ экземпляров ImageView
. Дело в том, что ImageView
— пользовательский элемент управления (Control
) и всего лишь является контейнером для изображений. Его основное предназначение не в том, чтобы хранить данные, а в том, чтобы представлять их пользователю. Как только мы начинаем рассматривать данный класс как контейнер для изображений, сразу же возникают два вопроса: как изображения в этом контейнере отображать и как обойтись минимальным количеством контейнеров с целью экономии ресурсов.
Для демонстрации общего случая годится класс 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>
-
А что делать, если я хочу разом вывести 200+ картинок(без прокрутки),размер тайла 16x16, а размер окна 320x320, т.е. получается 20 тайлов в ширину, 20 тайлов в высоту? Для этого есть какой-нибудь способ? А может я вообще выбрал не подходящую библиотеку для создания игры? 8 авг 2017 в 14:45
-
Я попробовал бы использовать для этого
Canvas
, отрисовывая на нем объектыImage
по координатам 8 авг 2017 в 14:56 -
-
@ПавелЧемармазович, вот здесь есть пример отрисовки изображений на
Canvas
stackoverflow.com/questions/28100060/…, работу сopacity
в нем можно опустить. 8 авг 2017 в 19:28 -
Да, но проблема в том,что при помощи метода drawImage() можно отрисовать только объект типа Image,а не ImageView( Может вы посоветуете какие-нибудь другие библиотеки для работы с графикой? 8 авг 2017 в 20:22