Question

我正在尝试将过滤器应用并移除到我的活动对象。我的代码将应用过滤器，但不会将其删除：

 $scope.contrastFilter = function () {
        var obj = canvas.getActiveObject();
        if (!obj) return;

        if (obj.filters.Contrast) {
            obj.filters.Contrast = null;
        } else {
            obj.applyFilters([ new fabric.Image.filters.Contrast({ contrast: 15 })]);
        }
        canvas.renderAll();
   };

Answer 1

$scope.contrastFilter = function() {
    var obj = canvas.getActiveObject();
    if (!obj) return;
    if (obj.filters[0]) {
        delete obj.filters[0];
    } else {
        obj.filters[0] = new fabric.Image.filters.Contrast({
            contrast: 15
        });
    }
    obj.applyFilters();
    canvas.renderAll();
};

obj.filters是一个包含所有过滤器的数组，因此在添加时，将过滤器类推送到obj.filters，并在删除时从该数组中删除。

Answer 2

管理结构图像上的过滤的另一种方法是：

确定用户是否可以拥有多个过滤器实例，以及是否始终以相同的顺序应用。

（对比度+饱和度可能与饱和度+对比度不同）

具有在过滤器数组中查找过滤器的功能：

findFilterIndex(object, filterType) {
  var filterIndex = -1;
  var filter = object.filters.forEach(function(filter, index) { 
    if (filter.type === filterType) {
      filterIndex = index;
    }
  });
  return filterIndex;
}

然后@Durga回答

$scope.contrastFilter = function() {
    var obj = canvas.getActiveObject();
    if (!obj) return;
    var index = findFilterIndex(obj, 'Contrast');

    if (index !== -1) {
        // fabric will keep it out from filtering
        obj.filters[index] = null;
    } else {
        obj.filters.push(new fabric.Image.filters.Contrast({
            contrast: 15
        });
    }
    obj.applyFilters();
    canvas.renderAll();
};

请注意，创建过滤器实例很便宜，但您不必每次都创建新过滤器。您仍然可以更改实际的滤镜对比度值。

obj.filters[index].contrast = 15;

FabricJS v.2 beta - 启用禁用过滤器

2 个答案: