我在我的程序中创建了一个类，它使用 KineticJS 作为 MVC 设计的“视图”部分。类中的一个实例变量是一个包含多个矩形对象的组。当我尝试通过 ID 选择该组中的特定矩形时，出现了我的问题。
我在 subMeasure 原型函数中使用 this.backgroundGroup.get('#id')[0] 没有问题，但是当我尝试在我的 drawMeasures 原型函数中使用它时，它会阻止我的画布绘制任何东西。Chrome 中的控制台显示“无法读取未定义的属性”ids“。
这些与使用 get 方法的唯一区别是 subMeasure 函数在“click”事件上被调用，而 drawMeasures 函数在 View 被实例化时被调用。
function View(){
this.status = 0;
this.stage;
//layers
this.backgroundLayer;
this.lineLayer;
this.noteLayer;
this.scanLayer;
this.editLayer;
this.UILayer;
//groups
this.backgroundGroup;
//edit buttons
this.subMeas;
this.addMeas;
this.edit;
this.backgroundArray;
this.lineArray;
}
View.prototype.initialize = function(){
//Initialize stage
this.stage = new Kinetic.Stage({
container: 'tab',
width:1200,
height: 400
});
//Initialize layers
this.backgroundLayer = new Kinetic.Layer();
this.lineLayer = new Kinetic.Layer();
this.noteLayer = new Kinetic.Layer();
this.scanLayer = new Kinetic.Layer();
this.editLayer = new Kinetic.Layer();
this.UILayer = new Kinetic.Layer();
//Initialize edit layer
this.edit = new Kinetic.Rect({
x:0,
y:5,
width:40,
height:20,
fill: 'gray',
stroke: 'black',
strokeWidth: 2
});
this.subMeas = new Kinetic.Rect({
x:40,
y:5,
width:40,
height:20,
fill: 'blue',
stroke: 'black',
strokeWidth: 2
});
this.addMeas = new Kinetic.Rect({
x:80,
y:5,
width:40,
height:20,
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
this.addEditButtonListeners();
this.editLayer.add(this.edit);
this.editLayer.add(this.subMeas);
this.editLayer.add(this.addMeas);
//Initialize Background Layer
this.initBackgrounds();
this.drawBackgrounds();
this.backgroundLayer.add(this.backgroundGroup);
//Initialize Line Layer
this.initLines();
//Initialize Note Layer
this.initNotes();
//Add everything to the stage and display
this.stage.add(this.backgroundLayer);
this.stage.add(this.lineLayer);
this.stage.add(this.noteLayer);
this.stage.add(this.scanLayer);
this.stage.add(this.editLayer);
this.stage.add(this.UILayer);
}
View.prototype.initBackgrounds = function() {
this.backgroundGroup = new Kinetic.Group({
x:20,
y:80
});
for(var i=0; i<controller.MAX_MEASURES; i++){
this.backgroundGroup.add(new Kinetic.Rect({
x: i*80,
y:0,
width:80,
height:220,
fill: 'gray',
stroke: 'black',
strokeWidth: 1,
id: i + '',
name: i + ''
}));
}
this.drawBackgrounds();
this.backgroundLayer.add(this.backgroundGroup);
}
View.prototype.drawBackgrounds = function() {
var temp;
for (var i=0; i<numMeasures; i++){
temp = this.backgroundGroup.get('#'+i)[0];
temp.setVisible(true);
}
for ( i; i<controller.MAX_MEASURES; i++){
temp = this.backgroundGroup.get('#'+i)[0];
temp.setVisible(false);
}
}
View.prototype.addEditButtonListeners = function() {
this.edit.on('click', function(){
controller.toggleEdit();
});
this.subMeas.on('click', function(){
controller.subMeasure();
});
this.addMeas.on('click', function(){
controller.addMeasure();
});
}
View.prototype.toggleEdit = function() {
if(isEdit){
this.subMeas.setVisible(false);
this.addMeas.setVisible(false);
this.stage.draw();
isEdit = 0;
}else {
this.subMeas.setVisible(true);
this.addMeas.setVisible(true);
this.stage.draw();
isEdit = 1;
}
}
View.prototype.subMeasure = function() {
var temp;
numMeasures--;
temp = this.backgroundGroup.get('#'+numMeasures)[0];
temp.setVisible(false);
this.stage.draw();
}
backgroundGroup 在 initBackgrounds 中被实例化为 KineticJS 组，其中添加了 8 个矩形，每个矩形的 id 为 0 到 7。
有问题的 get 调用发生在 drawBackgrounds 中。无问题的 get 调用发生在 subMeasure 中。
JSFiddle 链接：
编辑：我编写了一个解决方法 - 我创建了一个包含矩形的 backgroundArray，并在绘制背景方法中访问该数组。不过我不喜欢它，我宁愿只保留组中的矩形。