首页 文章

Blend Filter调用canvas函数`loadFromJson`时不适用

提问于
浏览 次
2

当我对图像执行 blend 过滤器并将画布转换为JSON时

然后我再次从那个JSON加载画布，那时我的滤镜没有被应用 .

我使用的是1.7.22版面料

我的过滤器代码如下：

canvas.getActiveObject().filters.push(new fabric.Image.filters.BlendColor({
                    color: '#ff0000',
                    mode: 'add',
                    alpha: 0.8
                }))
canvas.getActiveObject().applyFilters(canvas.renderAll.bind(canvas));

在画布加载到JSON之后，所有其他过滤器都能正常工作，但只有混合过滤器不起作用 . 我的过滤器中是否缺少任何属性？

我创造了一个代表问题的小提琴：http://jsfiddle.net/Mark_1998/1pc95xef/3/

filter fabricjs blending

1 回答

  • 2

    它似乎是 Blend.toObject() 没有保存其类类型导致的错误，所以 Blend 过滤器在序列化时没有 type: 'Blend' 结束 . 为了正确反序列化对象，Fabric解析了它的 type 属性，当它没有找到序列化过滤器的属性时，它只是放弃了它 .

    这是一个可用于解决此问题的补丁：

    fabric.Image.filters.Blend.prototype.toObject = function() {
  return fabric.util.object.extend(this.callSuper('toObject'), {
    color: this.color,
    image: this.image,
    mode: this.mode,
    alpha: this.alpha
  });
}

    BaseFilter.prototype.toObject() 确实设置了 type 属性，因此从它返回的对象扩展 Blend.prototype.toObject() 是有意义的 .

    P.S：最新的fabric.js 2.4没有这个问题，所以这是升级的另一个原因 .

    回复于

相关问题