Question

我在我的程序中创建了一个类，它使用KineticJS作为我的MVC设计的“视图”部分。该类中的一个实例变量是一个包含多个矩形对象的组。当我尝试通过其ID选择该组中的特定矩形时，我的问题出现了。

我使用this.backgroundGroup.get（'＃id'）[0]在我的subMeasure原型函数中没有问题，但是当我尝试在我的drawMeasures原型函数中使用它时，它会阻止我的画布绘制任何东西。 Chrome中的控制台说“无法读取属性”ids“未定义”。

使用get方法的唯一区别是在“click”事件上调用了subMeasure函数，并且在实例化View时调用了drawMeasures函数。

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链接：

http://jsfiddle.net/7xfLq/7/

编辑：我编写了一个解决方法 - 我创建了一个持有矩形的backgroundArray，并在绘制背景方法中访问此数组。我不喜欢它，我宁愿把矩形保留在组中。

Answer 1

您试图在将元素添加到舞台之前调用Kinetic查找方法。

如果您使用Chrome开发者工具并使用“{}”按钮，它将打印缩小的代码，允许您查看调用堆栈以查找有问题的代码的来源。在这种情况下，当您尝试执行Stage时未定义get()。

JSLint是一个很好用的工具。在JSFiddle中运行时，它确定了代码的其他问题。

这是不产生错误的代码链接。

http://jsfiddle.net/7xfLq/11/

最后一件事 - 不要尝试执行尚未编码的代码，因为它将停止执行该块的代码。只需注释掉那些不完整的方法调用。

KineticJS group.get（'＃id'）[0]在我的代码中不一致

1 个答案: