如何在 KonvaJS 中将滤镜应用于带有图像填充的形状？

Question

我正在使用 Konva.js 制作一些 canvas 动画。我有圆形，带有图像填充，并想将颜色 overlay/filter 应用到形状 (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 项。

有没有办法重新处理我上面的代码，以便我可以将滤镜应用于形状 object/fill 图像？

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

如何在 KonvaJS 中将滤镜应用于带有图像填充的形状？

How to apply a filter to a shape with image fill in KonvaJS?

javascript

canvas

kineticjs

konvajs