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

罗斯

我正在尝试使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我可以使用 jquery 点击进入 YouTube iframe 吗?

来自分类Dev

我可以使用jQuery访问影子DOM吗?

来自分类Dev

我可以使用Jquery获得元素的HTML源吗?

来自分类Dev

我可以使用jQuery或JavaScript更改此CSS吗?

来自分类Dev

我可以使用jquery操作<a>标记的名称属性吗?

来自分类Dev

如何使用 Xamarin.UI 测试将屏幕上的文本保存为字符串?

来自分类Dev

我可以使用通配符比较字符串吗?

来自分类Dev

如果我使用append生成HTML元素,那之后可以使用jQuery影响它们吗?

来自分类Dev

我可以使用python CSP吗?

来自分类Dev

我可以使用迭代器吗?

来自分类Dev

我可以使用通配符替换吗

来自分类Dev

我可以使用RTF格式吗?

来自分类Dev

骨骼可以使用我的插件吗?

来自分类Dev

我们可以使用JQuery或Javascript创建CSS选择器规则吗?

来自分类Dev

我可以使用JQuery随机化此代码中的输出引号吗?

来自分类Dev

我们可以使用jquery向上一级节点吗?

来自分类Dev

我可以使用Jquery将自定义属性插入HTML元素吗?

来自分类Dev

我可以使用JQuery选择器从特定的节点对象中进行选择吗?

来自分类Dev

我可以使用javascript / jquery更改此html标签/代码吗?

来自分类Dev

我可以使用jquery获取所有以“ on”开头的属性吗?

来自分类Dev

我们可以使用和运算符来组合多个jQuery事件吗

来自分类Dev

我可以使用JQuery选择器从特定的节点对象中进行选择吗?

来自分类Dev

我们可以使用SPService JQuery访问其他网站集中的列表吗?

来自分类Dev

我可以使用较短的jQuery脚本选择三个ID吗?

来自分类Dev

我可以使用jQuery Ajax在IE9中上传文件吗?

来自分类Dev

我可以使用Jquery插入asp.net控件吗?

来自分类Dev

我可以使用jquery .each()计算表单中的每一行吗?

来自分类Dev

我可以使用Greasemonkey和jQuery在页面中放置适当的笑脸或图像吗?

来自分类Dev

我可以使用jquery或javascript将数据连续添加到特定的td吗?

Related 相关文章

  1. 1

    我可以使用 jquery 点击进入 YouTube iframe 吗?

  2. 2

    我可以使用jQuery访问影子DOM吗?

  3. 3

    我可以使用Jquery获得元素的HTML源吗?

  4. 4

    我可以使用jQuery或JavaScript更改此CSS吗?

  5. 5

    我可以使用jquery操作<a>标记的名称属性吗?

  6. 6

    如何使用 Xamarin.UI 测试将屏幕上的文本保存为字符串?

  7. 7

    我可以使用通配符比较字符串吗?

  8. 8

    如果我使用append生成HTML元素,那之后可以使用jQuery影响它们吗?

  9. 9

    我可以使用python CSP吗?

  10. 10

    我可以使用迭代器吗?

  11. 11

    我可以使用通配符替换吗

  12. 12

    我可以使用RTF格式吗?

  13. 13

    骨骼可以使用我的插件吗?

  14. 14

    我们可以使用JQuery或Javascript创建CSS选择器规则吗?

  15. 15

    我可以使用JQuery随机化此代码中的输出引号吗?

  16. 16

    我们可以使用jquery向上一级节点吗?

  17. 17

    我可以使用Jquery将自定义属性插入HTML元素吗?

  18. 18

    我可以使用JQuery选择器从特定的节点对象中进行选择吗?

  19. 19

    我可以使用javascript / jquery更改此html标签/代码吗?

  20. 20

    我可以使用jquery获取所有以“ on”开头的属性吗?

  21. 21

    我们可以使用和运算符来组合多个jQuery事件吗

  22. 22

    我可以使用JQuery选择器从特定的节点对象中进行选择吗?

  23. 23

    我们可以使用SPService JQuery访问其他网站集中的列表吗?

  24. 24

    我可以使用较短的jQuery脚本选择三个ID吗?

  25. 25

    我可以使用jQuery Ajax在IE9中上传文件吗?

  26. 26

    我可以使用Jquery插入asp.net控件吗?

  27. 27

    我可以使用jquery .each()计算表单中的每一行吗?

  28. 28

    我可以使用Greasemonkey和jQuery在页面中放置适当的笑脸或图像吗?

  29. 29

    我可以使用jquery或javascript将数据连续添加到特定的td吗?

热门标签

归档