2

我正在尝试使用 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 会产生问题？

谢谢。

4

2 回答 2

0

我通过使用 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

希望这对任何人都有帮助，或者如果有更好的方法让我知道！

于 2015-02-22T19:19:02.930 回答
0

没有把握。但是，我在同一个问题上遇到了很多问题。www.onlinecakedesign.com -- 单击底部图标。我最终只保存了一张图片。原因是——解析对象不是通过 Kinetic 完成的。它使用标准的 JSON 命令。而且他们不会将动力学对象解析到最精细的细节。所以你最终得到的结果比预期的要少得多。也许这就是您遇到的问题。

Kinetic JS 没有做任何独特的事情 - 它使用标准逻辑，但标准逻辑不会解析到保存 Kinetic JS 对象所需的树级别。希望这是有道理的。

于 2015-02-19T03:12:04.633 回答