在 FabricJS 中删除多个路径答案

【问题标题】：Deleting multiple paths in FabricJS在 FabricJS 中删除多个路径
【发布时间】：2017-08-29 04:13:19
【问题描述】：

我正在使用 Fabric 创建一个协作绘图应用程序。由于此应用的性质，人们最好一次删除所有行，而不是实现某种撤消/擦除功能。

我尝试遍历paths 的列表，如下所示：

canvas.getObjects().forEach((path) => {
  if(path.senderId === client.id){
    canvas.remove(path);
  }
});

// Or

let paths = canvas.getObjects().filter(path => path.senderId === client.id);

while(paths.length) {
  canvas.remove(paths[0]);
}

第一个不起作用，因为删除路径会修改数组的长度（如 here 所讨论的）。但是，第二个永远运行，我不知道为什么。

如果这是错误的方法，请告诉我。谢谢！

【问题讨论】：

从画布中删除路径不会改变过滤路径数组的长度。
@Pointy 好吧，那真是个脑残。当我在家时，我会确保它有效，但我敢打赌就是这样。谢谢！
据我所知，getObjects() 返回对库管理的内部数组的引用。但是，当您像这样使用 .filter() 时，您最终会得到一个 new 数组。

标签： javascript fabricjs

【解决方案1】：

一种简洁明了的方法是：

canvas.getObjects('path').forEach((path) => {
  if(path.senderId === client.id){
    canvas.remove(path);
  }
});

通过这种方式，getObjects 将返回一个新数组，您应该能够删除它们而不会对您正在处理的数组感到生气。

我相信 getObjects() 应该总是返回一个浅拷贝，以便于处理这些情况。如果有人有一些性能问题，仍然可以直接访问 canvas._objects。

【讨论】：

有趣！那么getObjects 会在你不添加参数的情况下就地修改，但如果你这样做了会创建一个新数组？
是的，如果您阅读源代码，getObects 会直接返回数组或它的过滤版本