I have 2 objects (images) in my canvas.

fc.item(0) is a smaller image in the middle of the canvas. fc.item(1) is a large image, "frame". The user can't move it. When the user's trying to move the fc.item(1), I wanna move the fc.item(0), as if the user's moved on the fc.item(1).

Any idea, how can I do this? I tried to use the fc.item(0).fire("object:moving"), but this didn't work well.

I have 2 objects (images) in my canvas.

fc.item(0) is a smaller image in the middle of the canvas. fc.item(1) is a large image, "frame". The user can't move it. When the user's trying to move the fc.item(1), I wanna move the fc.item(0), as if the user's moved on the fc.item(1).

Any idea, how can I do this? I tried to use the fc.item(0).fire("object:moving"), but this didn't work well.

• javascript
• fabricjs

• If i understand right, the solution is to move your lower indexed object manually while the selected object is moving. Find the diff (x,y) of the item1 center and add them to item0 center. – arty Commented Jan 8, 2014 at 23:59

1 Answer 1

If you want to make top object unselectable just set its "selectable" to false.

fc.item(1).selectable = false;

If you also want to propagate events to the bottom object (essentially "ignoring" top one), set top one's "evented" property to false.

fc.item(1).evented = false;