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

Fabricjs对象在完成时移动火

  •  3
  • Jaan  · 技术社区  · 6 年前

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

    目前看起来是这样的:

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

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

    3 回复  |  直到 6 年前
        1
  •  7
  •   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
      } 
    });
    
        2
  •  0
  •   Mudassir    3 年前

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

    canvas.on('object:moved', function(event){
      recCanvas(canvas) // fire this if finished
    });
    
        3
  •  0
  •   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>