7

我正在将过滤器应用于对象（在图像过滤器演示之后）并且一切正常，但是在我保存并加载画布后，图像过滤器会更改索引。

目前我有四个过滤器，它们按索引应用（如演示中所示）。

0：灰度

1：反转

2：去除颜色

3 :- 混合颜色

因此，如果我应用灰度和删除颜色，“过滤器”数组看起来像这样，索引 0 和 2 是正确的......

在此处输入图像描述

但是在我加载画布（使用 loadFromJSON）之后，对象的“过滤器”数组看起来像这样，索引被重置......

在此处输入图像描述

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

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

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

创建对象时它工作正常...

在此处输入图像描述

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

在此处输入图像描述

4

2 回答 2

3

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

改了这个功能...

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();
}
于 2018-03-19T04:07:41.633 回答
1

在我当前的项目中，我需要能够自定义过滤器的顺序。之后丢失索引的问题canvas.toDatalessJSON()让我想到了为此制定一个简单的解决方案。每次加载画布时，我都会简单地构建一个新的过滤器名称数组。

const filterNamesDefault = ['Contrast', 'Saturation', 'Sharpen', 'Tint', 'invert', 'grayscale', 'Sepia'];

var filterNames = [];
var canvasLoaded = false;

canvasLoaded是一个布尔值，在加载画布时必须设置为 true。然后在applyFilterTypeandapplyFilterValue函数中，我为函数提供了过滤器类型而不是索引：

function filterIndex(filterType) {
      if (canvasLoaded) { return filterNames.indexOf(filterType); } else { return filterNamesDefault.indexOf(filterType); } 
} 

function applyFilterType(type, filter) {
     var index=filterIndex(type); 
     ...
}

 function applyFilterValue(type, prop, value) {
     var index=filterIndex(type);
     ...
}

假设我像往常一样添加了一些['Sharpen','Tint']存储在canvas.filters对象中的过滤器，并且在画布保存/加载后重新定位。然后，当我想显示图像层的过滤器编辑框时，我执行以下操作：

var obj = canvas.getActiveObject();
filterNames = [];
obj.filters.forEach(function(f,i){
    filterNames.push(f.type);
});
for (var i=0;i<filterNamesDefault.length;i++){
    if (!filterNames.includes(filterNamesDefault[i])) filterNames.push(filterNamesDefault[i]);
}

现在的新订单filterNames是：

['Sharpen', 'Tint', 'Contrast', 'Saturation', 'invert', 'grayscale', 'Sepia']

它也适用于过滤器的新顺序。

于 2019-12-17T11:25:15.137 回答