Не создается сетка изображений используя один объект, а так хочется
Хочу составить сетку из изображений Cell.png, используя один объект со смешением. Но не работает. Также использую доп. библиотеку KineticJs, но сути дела не меняет. Вот код:
function grid () { var gridLayer = new Kinetic.Layer; var cell; var gridImg = new Image (); gridImg.onload = function () { cell = new Kinetic.Image({ x:0, y:0, image:gridImg }); for (var i=40; i<640; i=i+GRID_SIZE) { for (var j=40; j<480; j=j+GRID_SIZE) { cell.x=j; cell.y=i; gridLayer.add(cell); } } stage.add(gridLayer); }; gridImg.src = "Cell.png"; } Где-то ошибка в коде? Или нужно создавать дофигище объектов и давать каждому свои координаты, что бы они образовывали сетку? На выходе получаю то, что рисуется один cell c координатами 0;0. |
Да, скорее всего тебе нужно наплодить много-много cell'ов. Но даже такой вариант не гарантирует, что все инстансы Kinetic.Image не будут делить между собой один-единственный Image, который есть DOM-элемент и его нельзя прикрепить сразу в несколько мест.
Попробуй так: function grid () { var gridImg = new Image(); gridImg.onload = function () { var gridLayer = new Kinetic.Layer(); for (var y = 40; y < 480; y += GRID_SIZE) { for (var x = 40; x < 640; x += GRID_SIZE) { gridLayer.add(new Kinetic.Image({ 'x': x, 'y': y, 'image': gridImg })); } } stage.add(gridLayer); }; gridImg.src = "Cell.png"; } |
Как вариант — вот так. Но картинки прогрузятся не сразу.
function grid () { var gridLayer = new Kinetic.Layer(); for (var y = 40; y < 480; y += GRID_SIZE) { for (var x = 40; x < 640; x += GRID_SIZE) { gridLayer.add(new Kinetic.Image({ 'x': x, 'y': y, 'image': getImage('Cell.png'); })); } } stage.add(gridLayer); } function getImage(src) { var img = new Image(); img.src = src; return img; } |
Блин, вообще не практично. Я то надеялся что ошибка где-то. Спасибо за ответ
|
Не парься. Картинка все равно грузится один раз. А много объектов — не смертельно, если в них два-три поля. Это ж js, он к такому приспособлен.
|
Часовой пояс GMT +3, время: 12:37. |