Dynamic 5.0.2从Json加载多图像

Dynamic 5.0.2从Json加载多图像,json,html,canvas,kineticjs,Json,Html,Canvas,Kineticjs,我想通过Kineticjs框架构建一个绘图工具。 基于本教程: 我生成Json字符串,并尝试根据我之前给出的id重新创建对象。然而,我在代码中发布了2个主要问题 如果在我的例子中有两个图像具有相同的id:将图像从菜单拖放两次到画布,那么当我们重新绘制时,它将只绘制最后一个图像。同样的事情也发生在教程中 当我尝试运行此stageReceived.get+arrMenu[I].id[0]时,它总是返回undefined,但如果我键入stageReceived.get'removeMenu'[0],

我想通过Kineticjs框架构建一个绘图工具。 基于本教程:

我生成Json字符串,并尝试根据我之前给出的id重新创建对象。然而,我在代码中发布了2个主要问题

如果在我的例子中有两个图像具有相同的id:将图像从菜单拖放两次到画布,那么当我们重新绘制时,它将只绘制最后一个图像。同样的事情也发生在教程中

当我尝试运行此stageReceived.get+arrMenu[I].id[0]时,它总是返回undefined,但如果我键入stageReceived.get'removeMenu'[0],它就会工作

 var arrMenu = [];
 function MenuItems(id, type) {
            this.id = id;
            this.type = type;
            this.source = "image/Menu_Icons/" + id + "." + type;
            this.draggable = true;
            return this;
        }

        //declare Object Menu                            
        var removeMenu = new MenuItems("removeMenu", "png");
        var rotate90DegreeMenu = new MenuItems("rotate90DegreeMenu", "jpg");
        var rotate180DegreeMenu = new MenuItems("rotate180DegreeMenu", "png");

        arrMenu.push(removeMenu);
        arrMenu.push(rotate90DegreeMenu);
        arrMenu.push(rotate180DegreeMenu);
//用户按下发送按钮在另一个div中生成和绘制阶段

        $('#send').click(function() {
            //declare json string 
            var json = stage.toJSON();
            console.log(json);
            // prepare stage 
            var stageReceived = Kinetic.Node.create(json, 'divMilldeRight');
            var imageObj = new Image();
            for (var i = 0; i < arrMenu.length; i++) {
                var idImage = '#';
                idImage = idImage + arrMenu[i].id;

                imageObj.onload = function() {
                    printConsole("onload function", idImage);
                    if (stageReceived.get(idImage)[0].image(imageObj)) {
                        stageReceived.draw();
                    }

                };
                imageObj.src = arrMenu[i].source;
            }
         });

我建议您不要为不同的节点设置相同的id。id的主要概念是定义唯一的节点。如果要调用不同的图像,最好使用name属性

你可以这样做

stageReceived.get('.'+ thename)[0]; //or .find
stageReceived.get('.'+ thename)[0]; //or .find