在fabric.js中添加滤镜到图案的图像

时间:2016-03-08 04:59:33

标签: javascript fabricjs

我正在尝试将滤镜应用于形状的图案图像,但是会收到很多错误。我google了很多,但仍然找不到有效的解决方案。以下是我的代码。问1.是否可能?问2.如何实现它??

    var canvas = new fabric.Canvas('c1');

    var circle = new fabric.Circle({
    radius: 100, fill: 'green', left: 100, top: 100
    });

    canvas.add(circle);

    loadPattern('http://i0.wp.com/www.illustratoring.com/wp-content/uploads/2012/12/chevron-pattern-illustrator.png?resize=40%2C40', circle);

    function loadPattern(url, obj){
    fabric.util.loadImage(url, function(img) {
      obj.setPatternFill({
            source: img,
            repeat: 'repeat'
      });
      canvas.renderAll();
   });
      }

这里是JSfilddle https://jsfiddle.net/eepmzy9n/2/我想对模式图像应用过滤器。

1 个答案:

答案 0 :(得分:0)

是的,这应该可以使用fabric js过滤器。结合模式和过滤器应该不是问题。

有关图片过滤器的信息:

使用过滤器的其他代码示例: