禁用fabricjs中的捕捉网格

问题描述

我设法使用四舍五入将对象捕捉到网格。

I managed to snap the objects to grid using round-off.

canvas.on('object:moving', function(options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});

如何禁用这个，比如说，点击按钮？

How do I disable this, say, on button click?

我尝试使用标志isGridEnabled并执行：

I tried using a flag isGridEnabled and doing:

canvas.on('object:moving', function(options) {
    options.target.set({
        left: options.target.left,
        top: options.target.top 
    });
});

但对象仍然捕捉到网格！

but the object(s) still snap to grid!

推荐答案

使用 .off 从Fabric画布中移除事件处理常式。

Use .off to remove an event handler from a Fabric canvas.

我会引用在注释中发布的kangax（Fabric.js的创建者）：

I'll quote what kangax (the creator of Fabric.js) posted in a comment to a similar question:

function f(opts) {
    eventHandler(opts, arg1, arg2)
}
canvas.on('object:over', f);
canvas.off('object:over', f);

（和。）

然后只需向按钮或其他元素添加事件监听器。

Then just add an event listener to a button or other element.

el.addEventListener('click', function(){
    canvas.off('object:over', f);
});

在这种情况下，您可以通过这种方式重构代码：

In your case, you might refactor your code this way:

function activateGrid(options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
}

onButton.addEventListener('click', function() {
    canvas.on('object:moving', activateGrid);
});

offButton.addEventListener('click', function() {
    canvas.off('object:moving', activateGrid);
});

这篇关于禁用fabricjs中的捕捉网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！