fabricjs:在loadFromJSON之后保留对象的图像过滤器的正确索引

Question

我正在对对象应用过滤器(在图像过滤器演示之后)并且一切正常但在我保存并加载画布后,图像过滤器会更改索引.

目前我有四个过滤器,它们通过索引应用(如演示中所示).

0:灰度

1:反转

2:去除颜色

3: - 混合颜色

因此,如果我应用灰度和删除颜色,'filters'数组看起来像这样,索引0和2是正确的...

但是在我加载画布(使用loadFromJSON)之后,对象的'filters'数组看起来像这样,索引重置...

有什么办法可以加载对象并保留过滤器索引吗？有一些代码依赖于此,当我加载具有带过滤器的对象的画布时,它会导致错误.

我尝试在创建对象时应用以下内容......

   oImg.filters = [
     false,
     false,
     false,
     false
   ];;

在创建对象时它可以正常工作......

但是当它被加载时,错误索引被删除并且它的结果相同......

Answer 1

我设法通过更改应用和检索过滤器的方式（按类型而不是索引）来实现此功能。我只是检查过滤器是否存在（通过“类型”而不是索引），然后将过滤器拼接到所需的索引处。

改了这个功能...

getFilter(index) { 
   var obj = canvas.getActiveObject();
   return obj.filters[index];
}

对此...

getFilter(type) { 
  var obj = canvas.getActiveObject();
  if (obj) {
    filter = null;
    obj.filters.forEach(function(f) {
      if (f.type == type) {
        filter = f;
      }
    });
    return filter;
  }
}

改了这个功能...

applyFilter(index, filter) {
  var object = canvas.getActiveObject();
  object.filters[index] = filter;
  object.applyFilters();
  canvas.renderAll();
}

对此...

applyFilter(type, filterIndex, filter) {
  var obj = canvas.getActiveObject();
  var indexExists = false;
  var filterFound = false;

  if (obj) {
    obj.filters.forEach(function(f, i) {
      if (f.type == type) {
        filterFound = true;
        obj.filters[i] = filter;
      } 
      if (filterIndex == i) {
        indexExists = true;
      } 
    });

    if (!filterFound && indexExists) {
      obj.filters.splice(filterIndex, 0, filter);
    } else if (!filterFound && !indexExists) {
      obj.filters[filterIndex] = filter;
    }

  }
  obj.applyFilters();
  canvas.renderAll();
}

改了这个功能...

applyFilterValue(index, prop, value) {
  var obj = canvas.getActiveObject();
  if (obj.filters[index]) {
    obj.filters[index][prop] = value;
    obj.applyFilters();
    canvas.renderAll();
  }
}

对此...

applyFilterValue(type, filterIndex, prop, value) {
  var obj = canvas.getActiveObject();
  if (obj) {
    obj.filters.forEach(function(f, i) {
      if (f.type == type) {
        obj.filters[i][prop] = value;
      }
    });
  }
  obj.applyFilters();
  canvas.renderAll();
}