CODEWITHSUNDEEP
javascriptcanvasfabricjs
PaulLing
PaulLing

Reputation: 2160

Fabric.js: how to deselect one or multiple objects on canvas?

For example, I have multiple objects on a canvas, A,*B* and C. Three of these objects are selected as activated. By using Fabric.js, is it possible to discard/deactivate only one of the objects?

For example, Three objects as selected, then when a button outside the canvas is clicked, object B is discarded/deactivated.

I looked into the doc files on FabricJS official website, and I only found canvas.deactivateAll(), canvas.discardActiveObject(). These function are only able to deactivate all active objects while not a specific active object.

Could someone please give me a guide on this? Thanks!

Upvotes: 38

Views: 45821

Answers (5)

Shantanu Wagh
Shantanu Wagh

Reputation: 1031

I may be late answering this, but in fabricjs (1.4.3) you can use the following to deselect all selected objects on the canvas.

canvas.deactivateAll().renderAll();

I am using this before creating a image of that canvas. Hope it helps someone.

for fabricjs 4.0 you can use:

canvas.discardActiveObject().renderAll();

Upvotes: 73

GIORGI N.
GIORGI N.

Reputation: 81

on updates there is just

canvas.discardActiveObject()

Upvotes: 7

Alex Mac
Alex Mac

Reputation: 2993

To discard all active groups you can use below function.Discards currently active group and fire events If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveGroup();

To discard sigle object you can use like this. Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveObject();

And in the last finally renders both the top canvas and the secondary container canvas like this.

canvas.renderAll();

Upvotes: 14

MANISH KUMAR SINGH
MANISH KUMAR SINGH

Reputation: 351

suppose you have three objects objectA, ObjectB and ObjectC and objects are selected. Now if you want to deselect any object( for example ObjectB). In this case you can try following code.

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

If you are having only one node active then you can do.

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

Upvotes: 19

PaulLing
PaulLing

Reputation: 2160

I have just found a way to do so:

When multiple objects are activated, they actually formed a group. Then actually just need to use a method of fabric.group called "removeWithUpdate" then it will do.

Example: 

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

Upvotes: 1

Related Questions