javascript - 如何关闭捕捉到网格fabricjs

Question

我有一个复选框，我想启用它来打开和关闭 fabric js 中的 Snap2grid。现在我可以正常打开它，但是如何将其关闭JSFiddle

$('#on-off-switch').change(function() {
    var $check = $(this),
        $div = $check.parent();

    if ($check.prop('checked')) {
        // Turn On Snap2Grid 
        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
            });
        });
        $("#on-off-label").text("On");
    } else {
        // Turn Off Snap2Grid
        $("#on-off-label").text("Off");
    }
});

Answer 1

这是一个非常大的 JSFiddle，我认为您的代码中可能存在其他问题。

有几种方法可以实现不同的行为，其中一种是检查事件函数本身的某些全局属性:

canvas.on('object:moving', function(event) {
  if(window.snapTo) {
        event.target.set({
            left: Math.round(options.target.left / grid) * grid,
            top: Math.round(options.target.top / grid) * grid
        });
  } else {
    // do nothing
  }
})

另一种方法是删除该事件。

您可以像这样删除所有事件:

canvas.off();

或某种类型的所有事件:

canvas.off('object:moving');

或者，如果您仅引用单个绑定(bind)事件处理程序的函数:

canvas.off('object:moving', eventHandlerFunction);