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

Question

I am trying to apply a filter to the pattern image of shape but receiving numerous errors. I googled a lot but still cannot find a solution that works. Below is my code. Q 1. Is it even possible? Q 2. How to achieve it!?

    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();
   });
      }

here is the JSfilddle https://jsfiddle.net/eepmzy9n/2/ I want to apply filters to the pattern image.

Answer 1

Yes, this should be possible using the fabric js filters. Combining patterns and filters shouldn't be an issue.

Info on image filters:

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

Other code examples using filters:

• Fabric js image filter
• How to apply filter to canvas backgroundImage in Fabric.js