Search code examples
javascripthtml5-canvasfabricjs

Fabricjs object moving fire on finish


I want to call a function if the object move Event is finished.

Currently it Looks like this:

canvas.on('object:moving', function (event) {
   recCanvas(canvas) // fire this if finished
});

The issue is that it fires the function everytime an object is moved how can I prevent this and fire the function once the moving finished.


Solution

  • What event happened when move event is finished?

    Mouse up will finish event object moving. So you need a boolean variable to check when object is moving, then on mouse up if object has been moved call you function:

    var isObjectMoving  = false;
    canvas.on('object:moving', function (event) {
       isObjectMoving = true;
    });
    
    canvas.on('mouse:up', function (event) {
      if (isObjectMoving){
        isObjectMoving = false;
        recCanvas(canvas) // fire this if finished
      } 
    });