我可以使用 Jquery UI 进入 Konva (Kineticjs) 阶段并保存到 JSON 字符串吗？

Question

我正在尝试使用 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 [=31] 中删除的房间=] 只有背景和标签。

这真的可以实现吗？还是因为我在 Konva 中使用 Jquery UI 造成了问题？

谢谢。

Answer 1

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

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

Answer 2

我已经通过使用 var images = stage.find('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

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

我可以使用 Jquery UI 进入 Konva (Kineticjs) 阶段并保存到 JSON 字符串吗？

Can I use Jquery UI to drop into Konva (Kineticjs) stage and save to JSON string?

jquery

json

jquery-ui

kineticjs

konvajs