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 срабатывает ДО того как файл будет реально загружен. Я уже всю голову сломал. Подскажите пожалуйста, как правильно загружать изображения в цикле? Да еще внутри метода класса... |
Цитата:
У вас в свойстве "onload" undefined, т.к. вы присваиваете результат работы функции, не её саму. Между строк 12 и 13 создайте переменную, которая будет хранить ссылку на контекст (слово "this"), в функции-callback'е onload созданная переменная и будет вашим "parent". |
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");
var parent = this;
for(var i = 0; i < this.Characters.length; i++) {
(function(i) {
parent.Characters[i][1] = new Image();
parent.Characters[i][1].onload = function() {
console.log(i + ": " + parent.Characters[i][1].src);
parent.cx.drawImage(parent.Characters[i][1], 100, 100 + i * 40);
};
parent.Characters[i][1].src = "Types/" + parent.Characters[i][0];
parent.cx.fillText(parent.Characters[i][0], 100, 100 + i * 40);
})(i);
}
}
}
//В тестовых целях создаем один единственный объект
var schema = new Schema();
//И пытаемся его отобразить на canvas
schema.Show();
|
Цитата:
Большое спасибо, все сразу заработало! А подскажите такой момент: если таким образом все объекты начнут загружать изображения, то будут ли они кешироваться браузером? Если у меня 2 разных объекта должны будут загрузить 2 раза одно и то же изображение, будет ли оно браться из кеша браузера или же каждый объект скачает свою копию файла картинки, и чтобы это избежать, мне надо организовывать отдельный класс, кеширующий динамически загружаемые изображения? |
micronic, по идее изображение должно кешироваться браузером, точно ответить не могу.
Цитата:
Можно не отвечать. |
| Часовой пояс GMT +3, время: 16:26. |