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

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

1 个答案: