angularjs - How to set Bounding box rotation and dimension of fabric group same as it's objects

Question

Version fabricjs 4.2.0

As You can see in picture I have Text and Rectangle in Group. Both text and Rectangle are rotated. So I Believe the Bounding Box of group should be rotated. But it isn't. Instead bounding box not rotated at all.

Note: I have added already Rotated text and rect to group. I tried using addWithUpdate() but doesn't work. I also tried giving angle to Group but its rotate child object again. What I want is bounding box of group should be same size of child object(Rectangle which acting as Border) and with same rotation angle of object.

Answer 1

The problem here is basically that when multiple objects are selected in the canvas, Fabric dynamically creates a group for them. Because of this, it assumes the rotation of the bounding box for the objects should be 0, because that's a sensible default. Therefore, if we want to get around this, we need to create our own group before we add the items to the canvas so that Fabric knows to treat them as part of the same thing.

In order to do that, we create a fabric.Group first, add the objects we want to add to the canvas to that, and then add that group to the canvas. For example,

const text = ...;
const rectangle = ...;

const group = new fabric.Group();
group.initialize([text, rectangle]);
canvas.add(group);

Note that this creates a static group - the objects added to the group cannot be separated from each other by user input. Unless there is other code to explicitly break up the group, fabric will continue to treat them as one entity.

JSFiddle: http://jsfiddle.net/35wgmhca/1/

The linked JSFiddle has an orange square grouped with a blue square to demonstrate how that bounding box correctly sticks to the group.