在fabricjs中禁用捕捉网格

Question

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

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

如何禁用此功能，例如，在单击按钮时？

我尝试使用标志 isGridEnabled 并做：

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

但对象仍然对齐网格！

Answer 1

使用 .off 从 Fabric 画布中删除事件处理程序。

我将引用 kangax（Fabric.js 的创建者）在对 a similar question 的评论中发布的内容：

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

（Official docs 和 related Stack Overflow answer.）

然后只需将事件侦听器添加到按钮或其他元素。

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

在你的情况下，你可以这样重构你的代码：

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