代码之家 › 专栏 › 技术社区 › Jaan

Fabricjs对象在完成时移动火

fabricjs html5-canvas javascript

Jaan · 技术社区 · 6 年前

如果对象移动事件完成,我想调用一个函数。

目前看起来是这样的:

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

问题是,每次移动对象时,它都会启动函数。如何防止这种情况发生,并在移动完成后启动函数。

3 回复 | 直到 6 年前

Observer 6 年前

移动事件完成时发生了什么事件?

鼠标向上移动将完成事件对象移动。所以,您需要一个布尔变量来检查对象何时移动,然后在鼠标悬停时,如果对象已移动,请调用函数:

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

Mudassir 3 年前

当对象完成移动时,会发生对象事件

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

Usman Hassan 3 年前

是的,我知道这已经很晚了,你可能已经找到了一个合适的答案,但是在Fabric js的当前版本中,如果你尝试使用上面标记的答案或尝试使用object:modified event,你可能会遇到一些bug,不是立即发现的,而是我发现的; 当您使用鼠标:向上或对象:修改以了解对象位置是否已更改时,当您尝试再拖动对象几次以更改位置以确定其工作是否正常时,浏览器页面可能会停止响应,有时需要一段时间画布才会响应并更新值。这就是我要做的,虽然我正在将react js与fabric js结合使用,所以我不能完全确定使用普通javascript的用户是否会遇到这个问题,但如果有人也使用react search来解决这个问题,这里有一个解决方案。使用useEffect挂钩或onComponentDidMount,并在其中创建一个setInterval,每隔0.5秒或任何您认为合适的时间获取当前活动对象,然后尝试更新变量,也不要忘记清除间隔。

//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>