Как применить фильтр к фигуре с заполнением изображения в KonvaJS?

Question

Я использую Konva.js для создания анимации на холсте. У меня есть формы круга, с заполнением изображения, и я хотел бы применить цветную накладку/фильтр к форме (RGBA).

Это, как я создаю объект 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'; 

демо: http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter, однако, насколько я могу сказать, что это может быть применен только к Konva.Image элементов.

Есть ли способ переделать мой код выше, чтобы я мог применять фильтры к объекту фигуры/заполнению?

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

Примечания: jsbin демо не будет работать с этим примером, как заливка изображение должно быть CORS включено (например, размещенные на одном домене) ,