Question

我想通过Kineticjs Framework构建绘图工具。基于本教程： http://www.html5canvastutorials.com/kineticjs/html5-canvas-load-complex-stage-with-kineticjs/

我生成Json字符串，并尝试在我之前提供的id上重新创建对象。但是我在我的代码中发布了2个主要问题。

如果有2个图像具有相同的ID（在我的情况下：从菜单拖放两次图像到画布），那么当我们重新绘制时，它将只绘制最后一个。教程中也发生了同样的事情。

当我尝试运行此stageReceived.get（＆＃39;＃＆＃39; + arrMenu [i] .id）[0]时，它始终返回undefined，但如果我键入stageReceived它会起作用。得到（＆＃39; #removeMenu＆＃39;）[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;
            }
         });

任何帮助都非常感谢:)提前感谢。

@Elsa的信用。每次插入时为同一图像设置相同的不同id，但给出相同的名称。通过.find（＆＃39; .name＆＃39;）查找图像数组，执行循环和.get（＆＃39;＃id＆＃39;）。问题解决了。希望它有助于某人遇到同样的麻烦。

            var shapes = stage.find('.image');//get the array of image
            // doing loop for every shape
            shapes.each(function(shape){
                console.log(shape.attrs.id); // get the different id of each shape
                stage.get('#'+shape.attrs.id)[0].image(imageObj); // set it for image
            });
            imageObj.src = source;
            stage.draw();

Answer 1

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

然后你可以这样做

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

Kinetic 5.0.2从Json加载多图像

1 个答案: