Is it possible to add filter to a group, which has many child nodes in it?

Question

I want to make filters on a group, and all the child nodes can apply the filters at the same time. But I found the filters can only be added on one single node, like a Image or a Rect, can I make the whole page apply the filters? I want to do something like below, can anyone help?

`group.filters([
 Konva.Filters.Contrast,
 Konva.Filters.Brighten,
 Konva.Filters.HSV
 ]);

 group.contrast(10);
 group.brightness(0.1);
 group.saturation(1.1);           
 group.hue(0);
 group.value(0);`

I tried map all the nodes in the group and add filters one by one, like this:

    `page.getChildren(function (node) {
      node.filters([
        Konva.Filters.Contrast,
        Konva.Filters.Brighten,
        Konva.Filters.HSV,
        Konva.Filters.Blur,
      ]);
      node.cache();
      node.hue(value);
    });`

But when I use a slider to change the value, it has bad performance, the page blocks and becomes very slow, can anyone help?

Answer 1

You can apply filter to the whole group. You just have to cache it too.

group.filters([Konva.Filters.Blur]);
group.blurRadius(10);
group.cache();