創建動態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](); 
}