我正在尝试使用Jquery UI创建拖放工具,以将房屋的房间放入Konva舞台,然后将该舞台另存为JSON字符串。
这是JSFiddle:http : //jsfiddle.net/RossWilliams94/cxzhabgL/4/
function dragDrop(e, ui) {
// get the drop point
var x = parseInt(ui.offset.left - offsetX, 10);
var y = parseInt(ui.offset.top - offsetY, 10);
// get the drop payload (here the payload is the image)
var element = ui.draggable;
var data = element.data("url");
//var theImage = document.getElementById('bedroom');
var theImage = element.data("image");
// create a new Konva.Image at the drop point
// be sure to adjust for any border width (here border==1)
var image = new Konva.Image({
name: data,
x: x,
y: y,
image: theImage,
draggable: true
});
image.on('dblclick', function() {
image.remove();
layer.draw();
});
var $clone = ui.helper.clone();
// all clones are draggable
// if clone is shape then draggable + resizable
if (!$clone.is('.inside-droppable')) {
$(this).append($clone.addClass('inside-droppable').draggable({
containment: $stageContainer,
tolerance: 'fit',
cursor: 'pointer',
position: 'relative',
snap: true,
snapTolerance: 15
}));
if ($clone.is(".imag") === false) {
$clone.resizable({
containment: $stageContainer
});
}
$clone.on('dblclick', function () {
$clone.remove();
layer.draw();
});
$clone.css({top: y, left: x, position:'absolute'});
}
json = stage.toJSON();
group.add(image);
layer.add(group);
stage.add(layer);
}
但是我遇到的问题是,当您单击“保存”按钮时,从JSFiddle中可以看到,它不保存从JQuery UI中放入的房间,仅保存背景和标签。
实际上有可能做到这一点吗?还是因为我在带有Konva的Jquery UI中使用而产生了问题?
谢谢。
我已经通过使用var images = stage.find('Image');从Image类型的层中获取所有子级来解决问题。
然后,我使用images.each(function(image){};
在阶段中图像的每次迭代中,我都执行以下操作:
var x = image.index - 2;
if (image.attrs['id'] == "sensor0") {
var imageObj = new Image();
imageObj.onload = function () {
stage.get('.sensor')[x].image(imageObj);
stage.get('.sensor')[x].draggable(false);
stage.draw();
};
imageObj.src = 'images/sensor.png';
它将正确的图像源设置为图像,并使图像不可拖动。
您还可以添加更多if语句来检查图像ID并相应地设置图像源。
问题在于,当您执行stage.toJSON()时,它不只记录图像属性,因此您必须在重绘舞台的地方手动重新加载图像。
本教程提供了帮助:http : //konvajs.github.io/docs/data_&_serialization/Complex_Load.html
希望这对任何人都有帮助,或者如果有更好的方法可以帮助我,请告诉我!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句