Показать сообщение отдельно
  #1 (permalink)  
Старый 05.02.2018, 11:00
Новичок на форуме
Отправить личное сообщение для micronic Посмотреть профиль Найти все сообщения от micronic
 
Регистрация: 05.02.2018
Сообщений: 2

Image.onload() не загружает изображение в canvas
Добрый день, форумчане!

Измучился уже весь, не могу решить проблему, вся надежда только на вас...

Я пытаюсь построить средствами JS на элементе canvas некий граф с изображениями. Каждый узел графа содержит свой набор изображений, которые необходимо вывести. Поэтому я создаю класс, представляющий собой узел, и пытаюсь вывести изображения, пути к которым хранятся в его свойствах.

Получился следующий код:
function Schema()
    {
        //Массив путей к файлам изображений, которые необходимо вывести на canvas в рамках текущего объекта
        this.Characters = [["11985_32.png"], ["22470_32.png"]];

        //Функция вывода изображений для объекта
        this.Show = function()
        {
            this.canvas = document.querySelector("canvas")
            this.cx = this.canvas.getContext("2d");

            this.i = 0;
            while (this.i<this.Characters.length)
            {
                this.Characters[this.i][1] = new Image();
                this.Characters[this.i][1].onload = function(parent)
                {
                    console.log(parent.i+": "+parent.Characters[parent.i][1].src);
                    parent.cx.drawImage(parent.Characters[parent.i][1], 100, 100 + parent.i*40);
                }(this)
                this.Characters[this.i][1].src = "Types/"+this.Characters[this.i][0];
                this.cx.fillText(this.Characters[this.i][0], 100, 100 + this.i*40);
                this.i++;
            }
        }
    }

    //В тестовых целях создаем один единственный объект
    var schema = new Schema();
    //И пытаемся его отобразить на canvas
    schema.Show();

Я постарался его немного сделать более читабельным, поэтому не пинайте сильно за не оптимальность.
В поле this.Characters хранится массив путей к файлам изображений. Точнее даже массив массивов, потому что я хотел бы сохранить напротив каждого пути еще и ссылку на соответствующий объект Image(), но суть не в этом.
Далее в цикле выводим все изображения. Здесь я постарался использовать замыкание для того чтобы событие onload отработало корректно.
Но у меня ничего не получается... Код исполняется, но console.log() выводит пустые пути к файлам. То есть получается что onload срабатывает ДО того как файл будет реально загружен.

Я уже всю голову сломал. Подскажите пожалуйста, как правильно загружать изображения в цикле? Да еще внутри метода класса...
Ответить с цитированием