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