Question

我正在使用Fabric.js。对于图片，我想向用户提供image filter个选项。

以下是创建新Gayscale过滤器的代码：

    var filter = new fabric.Image.filters.Grayscale();
    canvas.getActiveObject().filters=[];
    canvas.getActiveObject().applyFilters(_canvasObject.renderAll.bind(_canvasObject));
  canvas.getActiveObject().filters.push(filter);
    canvas.getActiveObject().applyFilters(_canvasObject.renderAll.bind(_canvasObject));

对于其他过滤器，代码几乎相同，除第一行外，重复性。

我提供了用户选择过滤器的复选框。我正在遍历所有checkBoxes并添加event listener以应用新过滤器。所以在下面的代码中我想动态创建过滤器对象。

var filterClickHandler = function(selectedFilter){
    return function(){
        applySelectedFilter(selectedFilter);
    }
}

function applySelectedFilter(selectedFilter){
//selectedFilter may be Grayscale,Sepia,etc...
// var filter = new fabric.Image.filters.Grayscale();
 var filter = new fabric.Image.filters.selectedFilter();
}

无论如何要这样做？

Answer 1

fabricJS类仍然是普通对象。你可以简单地做一些事情：

function applySelectedFilter(selectedFilter){
 var filter = new fabric.Image.filters[selectedFilter]();
}

创建动态javascript对象

1 个答案: