CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Jaan
Jaan

Reputation: 251

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.

Upvotes: 6

Views: 7954

Answers (3)

Usman Hassan
Usman Hassan

Reputation: 51

Yeah i know this is like pretty late and you probably found a suitable answer, but in the current version of Fabric js, if you try to use the above marked answer or try to use the object:modified event, you are likely going to encounter some bugs, not immediately but here is what I found; when you use the mouse:up or object:modified to know if object position is changed, when you try to drag the object to change the position a couple of more times to be sure if it's working great, the browser page might stop responding, and sometimes it will take time before the canvas responds and the value to get updated. So here is what I do, although i am using react js with fabric js so I am not fully sure if you who are using just vanilla javascript encounter this problem but in case someone also using react search for this problem here is a solution. use a useEffect hook or onComponentDidMount, and inside it create a setInterval that get the currently active object after every 0.5 seconds or whatever time you think will suit you, and then try to update the variable and also don't forget to clear the interval.

//import your fabric js and react

const GetActivePosition = () => {
  const [pos, setPos] = useState({left: 0, top: 0})
  
  useEffect(() => {
    const active = canvas.getActiveObject()
    let interval = undefined
    if (active){
      interval = setInterval(() => {
      setPos({left: active.left, top: active.top})
      }, 500)
    }

    return () => clearInterval(interval)
  }, [])
  
  return (
  <>
    <p>Left: {pos.left}</>
    <p>Top: {pos.top}</>
  </>
  )

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Mudassir
Mudassir

Reputation: 408

There is an object event when the object is finished moving

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

Upvotes: 0

Observer
Observer

Reputation: 3706

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
  } 
});

Upvotes: 8

Related Questions