在konva.js中是否可为rect元素设置类似CSS的blur模糊效果？

在React+Konva技术栈中实现和CSS filter: blur效果一致的矩形模糊是完全可行的，通常效果不生效都是由以下几个常见错误导致的：

• 未显式引入并声明模糊滤镜：Konva的滤镜不会默认加载，需要先引入Konva核心库，将Konva.Filters.Blur添加到元素的filters属性数组中。
• 未开启节点缓存：Konva的所有滤镜效果仅对已经缓存的节点生效，你需要给Rect元素添加cache={{ enabled: true }}属性，或者通过ref手动调用元素实例的cache()方法完成缓存。
• 模糊半径参数配置异常：模糊效果的生效程度由blurRadius属性控制，数值逻辑和CSS blur参数完全对齐，若该值设为0或者未赋值，就不会展示模糊效果。

正确实现示例 #

import { Stage, Layer, Rect } from 'react-konva';
import Konva from 'konva';

export default function App() {
  return (
    <Stage width={400} height={400}>
      <Layer>
        <Rect
          x={100}
          y={100}
          width={200}
          height={100}
          fill="#2196F3"
          // 声明使用模糊滤镜
          filters={[Konva.Filters.Blur]}
          // 配置模糊半径，和CSS blur(6px)效果一致
          blurRadius={6}
          // 开启节点缓存，滤镜必须依赖缓存生效
          cache={{ enabled: true }}
        />
      </Layer>
    </Stage>
  );
}

内容的提问来源于stack exchange，提问作者Izzei -