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

<强>ᴅᴇᴍᴏ

＆＃13;

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

＆＃13;

canvas {border: 1px solid #999}

＆＃13;

<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>

＆＃13;

fabricjs从画布中删除对象（线）但不是所有对象都被删除

1 个答案: