KonvaJSで画像を塗りつぶした図形にフィルターを適用するにはどうすればよいですか？

Question

私はKonva.jsを使っていくつかのキャンバスアニメーションを行っています。私は、画像の塗りつぶしの形をした円の形をしており、シェイプ（RGBA）にカラーオーバーレイ/フィルターを適用したいと考えています。

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

デモ：http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter、しかし限り、私はそれだけでKonva.Imageアイテムに適用することができます言うことができるように

これは私がShapeオブジェクトを作成しています方法です。

形状オブジェクト/塗りつぶし画像にフィルタを適用できるように、上記のコードを再作成する方法はありますか？

Answer 1

フィルタのドキュメントによると、あなたは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); 

注フィルタを適用する前の形状をキャッシュする必要があります。塗りつぶし画像がCORSを有効にする必要があるようjsbinデモは、この例では動作しません（例えば、同じドメインでホストされています） 。