javascript - 如何在 KonvaJS 中将过滤器应用于具有图像填充的形状？

Question

我正在使用 Konva.js 来做一些 Canvas 动画。我有带有图像填充的圆形形状，并且想对形状应用颜色叠加/滤镜 (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(例如托管在同一域上)。