如何关闭snap to grid fabricjs

时间:2016-09-08 18:41:49

标签: javascript jquery fabricjs

我有一个复选框,我希望在Snap2grid中启用和关闭fabric js。现在我可以打开它,但是如何将其关闭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");
    }
});

1 个答案:

答案 0 :(得分:2)

这是一个非常大的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');

或者,如果您只对单个绑定事件处理程序引用该函数:

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