是否可以为 konva.js 中的 rect 元素设置模糊？

Question

我想在我的 React 应用程序中对矩形元素使用模糊处理（如过滤器：css 中的模糊处理）。我尝试按照 konva 教程使用它，但它不起作用。这是可能的？我究竟做错了什么？这是我在我的 React 应用程序中实现它的尝试 code sandbox.

Answer 1

有可能。要使其正常工作，您需要使用 offset 属性 (https://konvajs.org/api/Konva.Node.html#cache):

创建更大的缓存

ref.current.cache({ offset: 110 });

https://codesandbox.io/s/react-konva-rect-cache-p3pxl

Konva 正在自动计算缓存 canvas 的大小。默认情况下，对于矩形，它会创建一个大小完全相同的 canvas。这样的缓存将只有红色像素。所以模糊效果是不可见的。增大缓存会在矩形周围添加透明像素。