在fabric js中添加和删除自定义属性

Question

我正在尝试使用自定义属性在画布上绘制网格。之后尝试使用那些添加的自定义属性删除该网格。

所以网格显示在画布上，但是当我试图删除网格时。它不工作。

代码

//Draw Grid
function draw_grid(){
    var grid = 50;
    canvas.getObjects().forEach(function(o) {
        if(o.custom_class == 'canvas_grid') {
            console.log(o.custom_class);
            canvas.remove(o);
        }
    });
    for (var i = 0; i < (600 / grid); i++) {
        var grid_line1 = new fabric.Line([i * grid, 0, i * grid, 600], {
            stroke: '#ccc',
            selectable: false,
            'custom_class' : 'canvas_grid'
        });
        canvas.add(grid_line1);

        var grid_line2 = new fabric.Line([0, i * grid, 600, i * grid], {
          stroke: '#ccc',
          selectable: false,
          'custom_class' : 'canvas_grid'
        });
        canvas.add(grid_line2);
    }
}

draw_grid();

/* Hide/Show Grid */
$(document).on('change','#show_grid',function(){
    if($(this).is(':checked'))
    {
       draw_grid(); 
    }
    else
    {
        canvas.getObjects().forEach(function(o) {
            if(o.custom_class === 'canvas_grid') {
                canvas.remove(o);
            }
        });
    }
});

代码笔

https://codepen.io/dhavalsisodiya/pen/OQEzVE

Answer 1

只需更改visible属性，无需一直添加和删除。

演示

var canvas = new fabric.Canvas('canvas1');
//Draw Grid
function draw_grid() {
  var grid = 50;
  var lines = [];

  for (var i = 0; i <= 600; i += grid) {
    lines.push(new fabric.Line([i, 0, i, 300],{stroke:'#000',strokeWidth: 2}));
  }

  for (var i = 0; i <= 300; i += grid) {
    lines.push(new fabric.Line([0, i, 600, i],{stroke:'#000',strokeWidth: 2}));
  }
  gridObj = new fabric.Group(lines, {
    selectable:false,
    evented:false,
    hoverCursor: 'auto',
    left: -2,
    top: -2,
    visible:false
  });
  canvas.add(gridObj);
  canvas.renderAll();
  console.log(gridObj.toJSON())
}

draw_grid();

/* Hide/Show Grid */
$(document).on('change', '#show_grid', function() {
  gridObj.visible = $(this).is(':checked');
  gridObj.dirty = true;
  canvas.renderAll();
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show Grid: <input type="checkbox" id="show_grid" /> 
<canvas id="canvas1" width="600" height="300" style="border:1px solid #000000;"></canvas>

这里是codepen。

或者

获取所有具有custom_class = canvas_grid 属性的对象并使用canvas.remove() 删除它们。这里是codepen。