fabricjs 从 canvas 中删除对象（行）但并非所有对象都被删除

Question

我对 fabricjs 比较陌生。我正在使用 fabricjs(1.7.11)、

在 canvas 上创建一个网格

我想要达到的目标：

基本上，当我单击一个按钮时，会创建一个网格，当我单击另一个按钮时，我想删除该网格（该网格由 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
        }));
    }
}

在 canvas 上创建了网格：

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();
}

ᴅᴇᴍᴏ

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}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<button onclick="CanvasGrid()">Add Grid</button>
<button onclick="RemoveGrid()">Remove Grid</button>
<canvas id="c" width="300" height="300"></canvas>

fabricjs 从 canvas 中删除对象（行）但并非所有对象都被删除

fabricjs removing objects (line) from canvas but not all objects are getting removed

html

javascript

canvas

fabricjs