fabricjs从画布上删除对象（线），但并非所有对象都被删除

Question

我对fabricjs比较陌生。我正在用fabricjs（1.7.11）在画布上创建一个网格，

我想要达到的目标：

基本上，当我单击一个按钮时，会创建一个网格，而当我单击另一个按钮时，我想删除该网格（该网格由fabricjs行组成），但是由于某种原因，并不是所有的行都被删除。

创建网格的功能

var grid = 30;
var cWidth = canvas.getWidth();

function CanvasGrid(){
    for(var i = 0; i < (cWidth / grid); i++){
        canvas.add(new fabric.Line([i * grid, 0, i * grid, cWidth], {
            stroke: '#ccc',
            selectable: false
        }));

        canvas.add(new fabric.Line([0, i * grid, cWidth, i * grid], {
            stroke: '#ccc',
            selectable: false
        }));
    }
}

在画布上创建的网格：

http://imgur.com/a/U1bD7

删除网格的功能：

function RemoveGrid(){
    var objects = canvas.getObjects('line');
    for(var i = 0; i < objects.length; i++){
        canvas.item(i).remove();        
    }   
    RenderCanvas();
}

结果：

http://imgur.com/a/vPmMa

我想删除其余的行。任何帮助，不胜感激。

谢谢。

编辑：我尝试了此解决方案，但我必须继续单击按钮，直到所有行都被删除。

function RemoveGrid(){
    canvas.forEachObject(function(obj){
        if(obj.type === 'line'){
            obj.remove();
        }
    });

    RenderCanvas();
}

任何帮助，不胜感激。谢谢

Answer 1

您可以使用以下功能删除所有网格...

function RemoveGrid() {
    var objects = canvas.getObjects('line');
    for (let i in objects) {
        canvas.remove(objects[i]);
    }
    RenderCanvas();
}

????

function RemoveGrid() {
    var objects = canvas.getObjects('line');
    for (let i in objects) {
        canvas.remove(objects[i]);
    }
    RenderCanvas();
}

var canvas = new fabric.Canvas('c');
var grid = 30;
var cWidth = canvas.getWidth();

// add grid
function CanvasGrid() {
    for (var i = 0; i < (cWidth / grid); i++) {
        canvas.add(new fabric.Line([i * grid, 0, i * grid, cWidth], {
            stroke: '#ccc',
            selectable: false
        }));
        canvas.add(new fabric.Line([0, i * grid, cWidth, i * grid], {
            stroke: '#ccc',
            selectable: false
        }));
    }
}

// remove grid
function RemoveGrid() {
    var objects = canvas.getObjects('line');
    for (let i in objects) {
        canvas.remove(objects[i]);
    }
    RenderCanvas();
}

canvas {border: 1px solid #999}