显示/隐藏在Angular中从JSON加载的KineticJS图层

时间:2014-05-28 04:18:55

标签: json angularjs canvas kineticjs

我试图在KineticJS中隐藏一个由JSON字符串构建的图层。然而,该层不会隐藏。如果我试图在JSON中隐藏具有ID的形状,它确实有效。不确定我是否在JSON中错误地创建了我的图层ID,或者KineticJS是否存在图层显示/隐藏问题。没有控制台错误。该层只是无法隐藏。 KineticJS是版本v5.1.1。帮助

这里是相关的JSON ....  { "attrs": { "width": 524, "height": 500 }, "className": "Stage", "children": [ { "attrs": {}, "className": "Layer", "id": "layer1", "children": [ { "attrs": { "draggable": true }, "className": "Group", "children": [ { "attrs": { "id": "firstShape", "x": 25, "y": 25, "radius": 190, "fill": "green" }, "className": "Circle" }, { "attrs": { "width": "auto", "height": "auto", "x": 64, "y": 120, "text": "Some label", "fontSize": 10, "fontFamily": "Arial", "fill": "white" }, "className": "Text" } ] } ] } ] }

这是进行图层隐藏的事件处理程序...我发现这是正确调用的,并且该图层不会隐藏。

scope.$on('hideLayer', function(){
 scope.kineticStageObj.get('#layer1').hide();
 scope.kineticStageObj.draw();
});

2 个答案:

答案 0 :(得分:0)

看起来你的json错了。图层的id应位于attrs对象内。

"attrs": {
   "id: : "layer1"
},

答案 1 :(得分:0)

试试这个:

{
    "attrs": {
        "width": 524,
        "height": 500
    },
    "className": "Stage",
    "children": [
        {
            "attrs": {
                "id": "layer1"
            },
            "className": "Layer",           
            "children": [
                {
                    "attrs": {
                        "draggable": true
                    },
                    "className": "Group",
                    "children": [
                        {
                            "attrs": {
                                "id": "firstShape",
                                "x": 25,
                                "y": 25,
                                "radius": 190,
                                "fill": "green"
                            },
                            "className": "Circle"
                        },
                        {
                            "attrs": {
                                "width": "auto",
                                "height": "auto",
                                "x": 64,
                                "y": 120,
                                "text": "Some label",
                                "fontSize": 10,
                                "fontFamily": "Arial",
                                "fill": "white"
                            },
                            "className": "Text"
                        }
                    ]
                }
            ]
        }
    ]
}