Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Compare: Working with groups

Showing with 17 additions and 1 deletion.
  1. +17 −1 Working-with-groups.md
View
18 Working-with-groups.md
@@ -48,4 +48,20 @@ Some of the most notable group methods are:
`item` — returns object at a specified index in a group<br>
`forEachObject` — invokes callback for each object in a group<br>
`add` — adds object to a group
-`remove` — removes object from a group
+`remove` — removes object from a group
+
+You can add/remove objects from group in 2 ways — with update of group dimensions/position and without.
+
+```js
+// to add rectangle at the center of a group (left=0, top=0)
+group.add(new fabric.Rect({ width: 20, height: 20, fill: 'yellow' }));
+
+// to add rectangle 100 px off the center of the group
+group.add(new fabric.Rect({ width: 20, height: 20, fill: 'yellow', left: 100, top: 100 }));
+
+// to add rectangle at the center of a group AND update group's dimensions
+group.addWithUpdate(new fabric.Rect({ width: 20, height: 20, fill: 'yellow', left: group.get('left'), top: group.get('top') }));
+
+// to add rectangle at 100 px off the center of a group AND update group's dimensions
+group.addWithUpdate(new fabric.Rect({ width: 20, height: 20, fill: 'yellow', left: group.get('left') + 100, top: group.get('top') + 100 }));
+```
Something went wrong with that request. Please try again.