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

Posted 2023-03-25

【中文标题】FabricJS v. 2 beta – 启用禁用过滤器

【英文标题】：FabricJS v. 2 beta – enable disable filter

【发布时间】：2018-03-01 19:14:04

【问题描述】：

我正在尝试对我的活动对象应用和删除过滤器。我的代码将应用过滤器但不会删除它：

 $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();
   ;

【问题讨论】：

你试过stage.getActiveObject()或canvas.getActiveGroup()吗？

根据您的建议我已经尝试过了。事实上，两者都不会做任何事情。 canvas.getActiveObject() 至少在应用过滤器。

请添加您的画布代码

是这样的——只是无法在线重新创建正常工作的过滤器：[jsfiddle.net/sharksinn/pk1zz68s/7]——仅限最新的 Chrome！

【参考方案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 并在删除时，从该数组中删除。

【讨论】：

这太棒了！关于此的一些问题： 1. 我是否必须对我想使用的所有过滤器重复此操作？或者有没有办法在这个函数中为对比度/模糊/棕褐色/任何东西定义一个过滤器数组？ 2.我为模糊滤镜复制了这个功能。它适用于两个过滤器，但我只能为对象分配一个过滤器 - 应用第二个过滤器将删除第一个过滤器。 3. 有没有一种简单的方法可以从滑块等访问选项（对比度或模糊量），而不必为每个过滤器单独编写？

我想我至少得到了一部分 ;-)（问题 1. 和 2.）：使用“obj.filters[0] / obj.filters[1] / obj.filters[2] “将完成这项工作。还是有一种更简单的方法可以将所有这些都集中在一个函数中？杜尔加：谢谢！ :-)

@SandorRozsa ，您可以检查there 他们正在放入特定索引然后将其删除。

是的，谢谢——我知道这个演示。我只是不明白为什么所有 timeStart 和 timeEnd 的东西都在那里以及它在做什么。老实说，我更喜欢你的解决方案。对于像我这样的新手来说，它要全面得多。我想你知道我的项目——该项目的目标之一是让新手开发人员也有机会用 Angular 和 Fabric 做一些很酷的事情 :-) 但也许你可以启发我关于时间 Star/End 的东西...... ?

各位，fabricjs 演示代码并不是工程的巅峰之作。他们只是为了让演示工作。请不要复制粘贴太多，否则您至少会有混乱的代码。 timeEnd timeStart 的东西是衡量一个过滤过程花了多长时间，作为信息在界面上报告。

【参考方案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;

【讨论】：

obj.filters[index] = null; //如果应用和删除相同的过滤器而不是下面的行，则此行会产生错误。使用删除 obj.filters[0];

【参考方案3】：

这个函数也从数组过滤器中删除一个过滤器。

fabric.util.removeFromArray(objetos[0].filters, 'Grayscale');

<a href="javascript:void(0);" id="f_grayscale">Grayscale</a>

$("#f_grayscale").on("click", function(event) 
    objetos = canvas4.getObjects('image');  
    var filter = new fabric.Image.filters.Grayscale(); 
    var index = findFilterIndex(objetos[0], 'Grayscale');
    if(index !== -1)
        delete objetos[0].filters[index] ;
    else
        objetos[0].filters.push(filter);
    
    objetos[0].applyFilters();      
    canvas4.renderAll();
); 

【参考方案4】：

在此处使用相同的按钮启用和禁用。

<a href="javascript:void(0);" id="f_polaroid">Polaroid </a>


$("#f_polaroid").on("click", function(event) 
    objetos = canvas4.getObjects('image');  

    var filter = new fabric.Image.filters.Polaroid();
    
    var index = findFilterIndex(objetos[0], 'Polaroid');
    if(index !== -1)
        delete objetos[0].filters[index] ;
    else
        objetos[0].filters.push(filter);
        //objetos[0].filters.push(new fabric.Image.filters.Grayscale());
    
    //objetos[0].filters.push(filter);
    objetos[0].applyFilters();      
    canvas4.renderAll();
);