Fabricjs 对象在完成时移动火答案

【问题标题】：Fabricjs object moving fire on finishFabricjs 对象在完成时移动火
【发布时间】：2018-09-07 09:16:08
【问题描述】：

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

目前它看起来像这样：

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

问题是每次移动对象时它都会触发该功能，我该如何防止这种情况并在移动完成后触发该功能。

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案1】：

移动事件完成后发生了什么事件？

鼠标上移将完成事件对象的移动。因此，您需要一个布尔变量来检查对象何时移动，然后在鼠标向上移动时调用您的函数：

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

【讨论】：

object:modified 怎么样？
是的，你可以这样做。这都是关于你想要完成的任务。
其实 'mouse:up' 每次都会触发，无论你是否修改了任何东西，但 object:modified 只会在你修改某些东西时触发。我认为 :modified 更好用。

【解决方案2】：

物体移动完毕有物体事件

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

【讨论】：

【解决方案3】：

是的，我知道这已经很晚了，您可能找到了合适的答案，但是在当前版本的 Fabric js 中，如果您尝试使用上面标记的答案或尝试使用 object:modified 事件，您很可能会遇到一些错误，不是立即，但这是我发现的；当您使用 mouse:up 或 object:modified 来了解对象位置是否已更改时，当您尝试多次拖动对象以更改位置以确保它是否正常工作时，浏览器页面可能会停止响应，有时画布响应和更新值需要时间。所以这就是我所做的，虽然我使用 react js 和 fabric js，所以我不完全确定你是否只使用 vanilla 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>

【讨论】：