Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не создается сетка изображений используя один объект, а так хочется (https://javascript.ru/forum/misc/49282-ne-sozdaetsya-setka-izobrazhenijj-ispolzuya-odin-obekt-tak-khochetsya.html)

Straj 05.08.2014 20:34

Не создается сетка изображений используя один объект, а так хочется
 
Хочу составить сетку из изображений 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.

ixth 05.08.2014 20:43

Да, скорее всего тебе нужно наплодить много-много 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";	
}

ixth 05.08.2014 20:50

Как вариант — вот так. Но картинки прогрузятся не сразу.

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;
}

Straj 05.08.2014 22:59

Блин, вообще не практично. Я то надеялся что ошибка где-то. Спасибо за ответ

ixth 05.08.2014 23:42

Не парься. Картинка все равно грузится один раз. А много объектов — не смертельно, если в них два-три поля. Это ж js, он к такому приспособлен.


Часовой пояс GMT +3, время: 12:37.