Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2014, 20:34
Интересующийся
Отправить личное сообщение для Straj Посмотреть профиль Найти все сообщения от Straj
 
Регистрация: 05.08.2014
Сообщений: 16

Не создается сетка изображений используя один объект, а так хочется
Хочу составить сетку из изображений 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.
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2014, 20:43
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Да, скорее всего тебе нужно наплодить много-много 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";	
}
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2014, 20:50
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

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

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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2014, 22:59
Интересующийся
Отправить личное сообщение для Straj Посмотреть профиль Найти все сообщения от Straj
 
Регистрация: 05.08.2014
Сообщений: 16

Блин, вообще не практично. Я то надеялся что ошибка где-то. Спасибо за ответ
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2014, 23:42
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск