CODEWITHSUNDEEP
javascriptcanvasfabricjs
Jeremy S.
Jeremy S.

Reputation: 1126

Fabric.js object jumps to bottom right after selecting – how do I prevent it?

I have a fabric.js canvas where I can move objects. Sometimes, all of a sudden, the object will jump to the bottom right. Here's what that looks like:

Fabric.js Object Jump

What appears to be happening is that a group is created which uses the top and left coordinates of the object. But the object within the group also adds the top and left coordinates relative to the group. So the top and left coordinates of the objects are twice as big as they should be.

This doesn't happen consistently. It typically happens when I click quickly, but sometimes happens when I drag. Most of the time it works as it should.

What I'd like to know is why it's happening and, more importantly, how to prevent it.

I should note that a lot goes on when I update the canvas – way more than I can simply paste here. Layers are rewritten, images are drawn, the UI is updated. I'm guessing something isn't loading in the right order, but I'm not sure what.

Upvotes: 1

Views: 957

Answers (1)

Jeremy S.
Jeremy S.

Reputation: 1126

I figured it out.

I have been clearing the selected objects as I render the canvas, which I needed to do to keep the rendering consistent. I would restore the selection later:

canvas.on('object:modified',function(){
  var active_objects = canvas.getActiveObjects();
  canvas.discardActiveObject();

  // rendering code

  var sel = new fabric.ActiveSelection(active_objects,{
     canvas: canvas,
  });
  sel.setObjectsCoords();
  sel.setCoords();
  canvas.setActiveObject(sel);
  canvas.requestRenderAll(); 
});

The issue was that if the a new selection was created before canvas.setActiveObject(sel) was called, the new selection would get messed up, with the objects going to the bottom right.

Fixed with a simple if statement:

if (canvas.getActiveObjects().length < 1){
   var sel = new fabric.ActiveSelection(active_objects,{
      canvas: canvas,
   });
   sel.setObjectsCoords();
   sel.setCoords();
   canvas.setActiveObject(sel);
   canvas.requestRenderAll();
}

This is probably specific to my project.

Upvotes: 2

Related Questions