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

Share Improve this question Follow edited Jan 9, 2014 at 3:04 kangax 39.2k1313 gold badges100100 silver badges135135 bronze badges asked Jan 8, 2014 at 15:04 kleniumklenium 2,61722 gold badges2727 silver badges5252 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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;