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

禁用fabricjs中的捕捉网格

1 个答案: