javascript - Fabricjs object moving fire on finish - Stack Overflow

admin管理员组

文章数量:1344321

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.

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.

• javascript
• html5-canvas
• fabricjs

Share Follow edited Mar 28, 2018 at 16:10 Vadim Kotov 8,28488 gold badges5050 silver badges6363 bronze badges asked Mar 28, 2018 at 15:38 JaanJaan 25122 gold badges66 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

There is an object event when the object is finished moving

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

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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

本文标签： javascriptFabricjs object moving fire on finishStack Overflow