Fabric.js：如何取消选择画布上的一个或多个对象？

Posted 2023-03-25

【中文标题】Fabric.js：如何取消选择画布上的一个或多个对象？

【英文标题】：Fabric.js: how to deselect one or multiple objects on canvas?

【发布时间】：2013-12-26 01:42:54

【问题描述】：

例如，我在画布上有多个对象，A、*B* 和 C。其中三个对象被选为已激活。通过使用 Fabric.js，是否可以仅丢弃/停用一个 对象？

例如，三个对象被选中，然后当点击画布外的按钮时，对象 B 被丢弃/停用。

我查看了FabricJS官网的doc文件，只找到了canvas.deactivateAll()、canvas.discardActiveObject()。这些功能只能停用所有活动对象，而不是特定活动对象。

有人可以给我一个指导吗？谢谢！

【参考方案1】：

我可能会迟到回答这个问题，但在 fabricjs (1.4.3) 中，您可以使用以下命令取消选择画布上的所有选定对象。

canvas.deactivateAll().renderAll();

我在创建该画布的图像之前使用它。希望它可以帮助某人。

对于fabricjs 4.0，您可以使用：

canvas.discardActiveObject().renderAll();

【讨论】：

如果您还想触发selection:cleared 和before:selection:cleared 事件，您可以使用canvas.deactivateAllWithDispatch()

不再使用fabricjs版本>2.x github.com/fabricjs/fabric.js/issues/4214

对于织物版本> 2.x，canvas.discardActiveObject();是要走的路

我们如何在使用该对象取消选择后获取该取消选择的对象：deleted 事件？

【参考方案2】：

假设您有三个对象objectA、ObjectB 和ObjectC，并且选择了对象。现在，如果您想取消选择任何对象（例如 ObjectB）。在这种情况下，您可以尝试以下代码。

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(ObjectB);
canvas.renderAll(); 

如果您只有一个节点处于活动状态，那么您可以这样做。

canvas.discardActiveObject();
canvas.renderAll(); 

【参考方案3】：

要丢弃所有活动组，您可以使用以下函数。丢弃当前活动组和触发事件如果该函数由结构作为鼠标事件的结果调用，则该事件作为参数传递并发送到触发函数自定义事件。当用作方法时，e 参数没有任何应用程序。

canvas.discardActiveGroup();

要丢弃单个对象，您可以像这样使用。丢弃当前活动的对象和触发事件。如果函数因鼠标事件而被fabric 调用，则该事件将作为参数传递并发送到自定义事件的fire 函数。当用作方法时，e 参数没有任何应用程序。

canvas.discardActiveObject();

最后像这样渲染顶部画布和辅助容器画布。

canvas.renderAll();

【讨论】：

→ 一行canvas.discardActiveObject().renderAll();

是的，但请再次阅读我的回答。我添加了如何丢弃 GROUP、OBJECT 然后渲染它。您在此处添加的一行仅在您要删除单个对象并渲染它时才有效，但如果要删除整个组，则必须从 OBJECT 更改为 GROUP。

【参考方案4】：

只有更新了

canvas.discardActiveObject()

【讨论】：

虽然我们感谢您的回答，但如果它在其他答案之上提供额外的价值会更好。在这种情况下，您的答案不会提供额外的价值，因为另一个用户已经发布了该解决方案。如果以前的答案对您有帮助，您应该在有足够的reputation 时vote it up

【参考方案5】：

我刚刚找到了一种方法：

当多个对象被激活时，它们实际上形成了一个组。那么实际上只需要使用fabric.group的一个名为“removeWithUpdate”的方法就可以了。

例子：

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(theObject);
canvas.renderAll();