Wie man einen Filter auf eine Form mit Bildfüllung in KonvaJS anwendet?

Question

Ich verwende Konva.js, um einige Leinwandanimationen zu machen. Ich habe Kreisformen mit einer Bildfüllung und möchte eine Farbüberlagerung/Filter auf die Form anwenden (RGBA). Diese

ist, wie ich die Schaffung der Shape-Objekt:

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'; 

Demo: http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter, aber soweit ich es kann sagen, kann nur auf Konva.Image Elemente angewendet werden.

Gibt es eine Möglichkeit, meinen obigen Code zu überarbeiten, so dass ich Filter auf das Formobjekt/Füllbild anwenden kann?

Answer 1

Nach Filter Dokumentation, müssen Sie Form vor der Anwendung Filter cachen 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); 

Hinweis: jsbin Demo wird nicht mit diesem Beispiel arbeiten als gefülltes Bild sollte CORS (zB gehostet auf derselben Domäne) aktiviert werden .