在fabric.js中向形状的图案图像添加滤镜

Question

我试图将过滤器应用于形状的图案图像，但收到许多错误。 我在Google上搜索了很多，但仍然找不到有效的解决方案。 以下是我的代码。 Q 1.有可能吗？ Q 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/我想将过滤器应用于图案图像。

Answer 1

是的，使用fabric js过滤器应该可以实现。 模式和过滤器的组合应该不是问题。

图像滤镜信息：

• http://fabricjs.com/fabric-intro-part-2/#image_filters
• http://fabricjs.com/image-filters/

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

• Fabric JS图像过滤器
• 如何在Fabric.js中将滤镜应用于画布backgroundImage