如何在 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（例如托管在同一域上）。