Comment appliquer un filtre à une forme avec remplissage d'image dans KonvaJS?

Question

J'utilise Konva.js pour faire des animations sur toile. J'ai des formes de cercle, avec un remplissage d'image, et voudrais appliquer une superposition de couleur/filtre à la forme (RGBA).

Voici comment je crée l'objet Shape:

var konvaObject = new Konva.Circle({ 
    x: 100, 
    y: 100, 
    radius: 300, 
    stroke: this.color, 
    strokeWidth: 6, 
    fillPatternRepeat: 'no-repeat', 
}); 

// load the image into the shape: 
var imageObj = new Image(); 
imageObj.onload = function() { 
    konvaObject.fillPatternImage(imageObj); 
    konvaObject.draw(); 
} 
imageObj.src = 'www.demo.com/anImageName.png'; 

Démo: http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter, mais pour autant que je peux dire qu'il ne peut être appliqué à Konva.Image articles.

Existe-t-il un moyen de retravailler mon code ci-dessus afin que je puisse appliquer des filtres à l'objet de forme/remplir l'image?

Answer 1

Selon la documentation du filtre, vous devez mettre en cache la forme avant l'application de filtres http://konvajs.github.io/api/Konva.Filters.html#RGBA

node.cache(); 
node.filters([Konva.Filters.RGBA]); 
node.blue(120); 
node.green(200); 
node.alpha(0.3); 

Note: jsbin démo ne fonctionnera pas avec cet exemple que l'image de remplissage doit être CORS activé (par exemple hébergé sur un même domaine) .