Fabric.js画布中点击按钮移除网格线的实现方案

这个问题我之前也碰到过，核心痛点就是没法区分网格线和其他画布对象对吧？其实解决思路很简单——要么给网格线做个专属标记，要么把它们的引用单独存起来，这样就能精准定位并移除了，完全不会碰其他元素。

下面给你两种实用的方案，你可以根据自己的场景选：

方案一：用数组存储网格线引用（效率更高） #

这种方法是把所有创建的网格线对象都存在一个数组里，移除的时候直接遍历数组操作，不用扫描整个画布的对象，性能更好。

1. 先在合适的作用域（比如全局或者你的组件内部）声明一个空数组，用来存网格线：

let gridLines = [];

2. 修改你的添加网格代码，每次创建完Line对象后，把它push到数组里：

var gridsize = 5; 
var gridoption={ 
  stroke: "#000000", 
  strokeWidth: 1, 
  selectable:false, 
  strokeDashArray: [5, 5],
  evented:false
}; 

// 先清空之前的数组，防止重复添加网格
gridLines = [];

for(var x=1;x<(canvas.width/gridsize);x++) { 
  // 创建横竖两条线
  const verticalLine = new fabric.Line([100*x, 0, 100*x, 600], gridoption);
  const horizontalLine = new fabric.Line([0, 100*x, 600, 100*x], gridoption);
  
  // 添加到画布
  canvas.add(verticalLine, horizontalLine);
  
  // 把网格线存入数组
  gridLines.push(verticalLine, horizontalLine);
}

3. 写移除网格的函数，遍历数组逐个移除：

function removeGrid() {
  gridLines.forEach(line => {
    canvas.remove(line);
  });
  // 移除后清空数组，避免下次操作出错
  gridLines = [];
}

方案二：给网格线加自定义标记属性 #

如果不想额外维护数组，也可以给网格线对象加一个自定义属性，移除的时候遍历画布所有对象，判断这个属性来筛选。

1. 修改你的gridoption，添加一个自定义属性isGrid: true：

var gridoption={ 
  stroke: "#000000", 
  strokeWidth: 1, 
  selectable:false, 
  strokeDashArray: [5, 5],
  evented:false,
  isGrid: true // 给网格线打个标记
}; 

2. 移除网格的函数这样写：

function removeGrid() {
  // 遍历画布所有对象
  canvas.getObjects().forEach(obj => {
    // 判断是否是网格线
    if (obj.isGrid) {
      canvas.remove(obj);
    }
  });
}

小提醒 #

不管用哪种方案，建议你点击“添加网格”按钮前，先调用一次removeGrid()，这样就能避免多次点击后画布上叠加多层网格的问题啦。

内容的提问来源于stack exchange，提问作者uddipana