创建动态JavaScript对象

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](); 
}