我正在对对象应用过滤器(在
image filters demo之后)并且一切正常但在我保存并加载画布后,图像过滤器会更改索引.
目前我有四个过滤器,它们通过索引应用(如演示中所示).
0 : Grayscale
1 : Invert
2 : Remove Color
3 :- Blend Color
因此,如果我应用灰度和删除颜色,’过滤器’数组看起来像这样,索引0和2是正确的…
但是在我加载画布(使用loadFromJSON)之后,对象的’filters’数组看起来像这样,索引重置…
有什么办法可以加载对象并保留过滤器索引吗？有一些代码依赖于此,当我加载具有带过滤器的对象的画布时,它会导致错误.
我尝试在创建对象时应用以下内容……
oImg.filters = [
false,false,false
];;
创建对象时它可以正常工作……
解决方法
我设法通过改变我应用和检索过滤器的方式(按类型而不是索引)来实现这一点.我只是检查过滤器是否存在(通过’type’而不是index),然后将过滤器拼接在所需的索引处.
改变了这个功能……
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,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,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();
}
