Когда я спросил вас, если у вас есть причина, вы имели полосу изображений вне стадии KineticJS, вы ответили:
только потому, что когда я toJSON его (для сохранения и вызова для будущего редактирования), я просто хочу, чтобы изображения на моем коллаже и не й e фотографии на полосе.
Мой ответ на это:
Вы не должны использовать toJSON на всей стадии.
Если вы разделяете фото Газа (ранее за пределами холста) в другой слой из Коллаж (ранее внутри холста, то вы можете иметь два слоя и использовать toJSON только на одном из этих слоев!
результат будет то, что toJSON только сериализовать объекты из этого данного слоя, который звучит как то, что вам нужно
jsfiddle. - вот пример, чтобы проиллюстрировать, что я имею в виду, простите мою плохую логику для привязки изображения к группе. У меня есть 2 слоя: photoStripLayer и collageLayer
Нажмите на кнопку Коллаж toJSON. Обратите внимание, что вывод console.log не содержит никаких изображений. Это связано с тем, что collageLayer имеет только группу, в которой есть дочерний прямоугольник.
Перетащите первую йоду (вверху слева, остальные не работают, это просто пример) в красный квадрат. Извините, вам придется поиграть с этим, чтобы он правильно привязался (я предполагаю, что у вас уже есть ваш код «привязки»)
dragend Если узел Yoda находится внутри красного ящика, он будет использовать KineticJS 'moveTo Функция перемещения йоды с photoStripLayer ->collageLayer. Вы узнаете, что это сработало, когда Йода привязана к позиции (0,0) относительно новой группы.
Нажмите на кнопку Коллаж toJSON. Обратите внимание, что изображение yoda теперь является частью вывода toJSON console.log. Йода был перенесен в новую группу, которая является дочерней по отношению к collageLayer. Теперь часть коллажа-слоя, Йода -.
Вот dragend код:
node.on('dragend', function() {
var pos = stage.getMousePosition();
var X = pos.x;
var Y = pos.y;
var minX = snap.getX();
var maxX = snap.getX() + snap.getWidth();
var minY = snap.getY();
var maxY = snap.getY() + snap.getHeight();
if (node.getX() < minX) {
node.moveTo(snap);
node.setX(0);
node.setY(0);
}
if (node.getX() > maxX) {
node.moveTo(snap);
node.setX(0);
node.setY(0);
}
if (node.getY() < minY) {
node.moveTo(snap);
node.setX(0);
node.setY(0);
}
if (node.getY() > maxY) {
node.moveTo(snap);
node.setX(0);
node.setY(0);
}
photoStripLayer.draw();
collageLayer.draw();
});
И код нажмите кнопку, чтобы проиллюстрировать с помощью toJSON:
function collageToJSON() {
var cjson = collageLayer.toJSON();
console.log(cjson);
/* To illustrate, you can also call toDataURL here. But in JSFiddle I think it throws a Security Error.
collageLayer.toDataURL({
callback: function(dataUrl) {
window.open(dataUrl);
}
});
*/
}
document.getElementById('CtoJSON').addEventListener('click', function() {
collageToJSON();
});
А что у вас есть! Вопрос решается путем предоставления KineticJS обрабатывает весь процесс.
Есть ли причина, по которой ваша «полоса изображений» находится за пределами контейнера для холста? Было бы намного проще, если бы вы просто перенесли его в холст - KineticJS может легко справиться с этим сценарием самостоятельно. – projeqht
Только потому, что, когда я нахожусь в нем (для сохранения и вызова для будущего редактирования), мне просто нужны изображения на моем коллаже, а не фотографии на полосе. Имеет ли это смысл? – bachposer
как «жестко закодированные» лунки изображений отличаются от заранее определенных областей изображения? есть ли у вас скрипка, чтобы объяснить это? – Ani