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