Question

我以这种方式调用自定义事件： How can I fire custom events on canvas in Fabric JS?

有没有办法像对象一样连续调用它：缩放/移动事件？

SOLUTION：

我使用object：moving event：

解决了这个问题

canvas.on({'object:moving': handleMovement});
...
var handleMovement = function (event) {

    //only when a specific corner was dragged
    if (event.target.__corner == 'mb') {
        //reset original position
        event.target.top = event.target.originalState.top;
        event.target.left = event.target.originalState.left;
        //do other stuff
    }
}

Answer 1

如果你需要连续调用事件，可以将它包装在while循环中，或使用某种超时。

while (shouldFire) {
    canvas.trigger(event);
}

或

setTimeout(triggerEvent, 100);
function triggerEvent() {
    canvas.trigger(event);
    setTimeout(triggerEvent, 100);
}

然而，这对用户来说可能并不理想（特别是在此时）。

虽然对象：缩放/移动事件可能看起来是连续调用的，但我相信它们只是在响应用户交互时被非常快速地调用。在fabricjs网站上有一个很好的event demo用于查看此内容。如果选择一个对象并将其固定，则画布不会触发任何事件。相反，事件仅在响应用户移动时触发，例如在画布周围拖动形状。因此，您可以简单地听取用户输入中的微小变化，而不是试图让事件持续发生。

连续调用fabricjs事件

1 个答案: