CODEWITHSUNDEEP
javascriptselectiondragfabricjs
TonyE
TonyE

Reputation: 149

FabricJS: object:moving event doesn't fire when user selects multiple objects

In FabricJS, there is an object:moving event you can fire a function for, which I have rigged up to keep lines attached to dots in the same way they have here in the stickman demo: http://fabricjs.com/stickman/

In their demo, they have turned of the ability to select dots by clicking and dragging a square around them, then moving that selection of objects by clicking and dragging it. In my case, I want the user to be able to select multiple dots and drag them at the same time, but right now what's happening is that the lines disconnect from the dots. This exact issue is illustrated here in their quadratic curve example: http://fabricjs.com/quadratic-curve/. Select both dots at once and drag your selection... it will disconnect the dots from the line.

Is there some way to fig up an event when moving the selection? It seems to create a group on the fly, but I tried using the selection:created event to get a hold of that group and again set an object:moving event handler on each object in the group, with no success. Any ideas here?

Upvotes: 2

Views: 3264

Answers (1)

kezor
kezor

Reputation: 91

There are two approaches you can take.

  1. Add a listener to the canvas for 'object:moving' event. This will fire for any moving object or group. canvas1.on('object:moving', function(event) { console.log("object:moving"); });

  2. When a selection group is created you can add a moving event directly to the group.

    canvas1.on('selection:created', function(event) { canvas1.getActiveGroup().on('moving', function(event) { console.log('moving'); }); console.log("selection created"); });

This fiddles has examples of both. http://jsfiddle.net/pxnfbt89/

Upvotes: 5

Related Questions