如何在Paper.js中对带填充的闭合路径元素实现模糊效果？

1. 带填充闭合路径的模糊效果实现 #

可以实现，不需要依赖raster方案。Paper.js原生支持对任意路径元素应用高斯模糊滤镜，兼容纯色、渐变、图案填充的路径，完全覆盖常规使用场景。
你之前尝试的shadowBlur方案未达到预期，是因为该属性默认只渲染路径的偏移阴影层，原路径本身始终保持清晰。如果要通过shadowBlur模拟路径模糊，需要将路径自身的填充/描边设为完全透明，同时把shadowOffsetX、shadowOffsetY设为0，shadowColor和原填充色完全匹配。但这个方案仅支持纯色填充的路径，渐变、半透明填充场景下无法匹配效果，不推荐使用。

2. SVG feGaussianBlur原语复用规则 #

不需要为每个路径单独创建feGaussianBlur原语。相同模糊参数的高斯模糊可以复用同一个滤镜实例，Paper.js会自动把复用的滤镜仅在SVG的defs中生成一次feGaussianBlur定义，所有应用该滤镜的路径只会引用同一个滤镜ID，不会重复生成冗余原语。
示例代码：

// 全局创建一次通用模糊滤镜，半径可自定义
const gaussianBlur5 = new paper.GaussianBlur(5);

// 所有需要同参数模糊的路径都复用这个实例即可
const path1 = new paper.Path.Rectangle({
  point: [50, 50],
  size: [100, 100],
  fillColor: 'red',
  filters: [gaussianBlur5]
});

const path2 = new paper.Path.Circle({
  center: [200, 100],
  radius: 50,
  fillColor: 'blue',
  filters: [gaussianBlur5]
});

上述代码最终只会生成一个feGaussianBlur原语。

3. 数百个路径下的性能表现 #

性能损耗主要和以下因素相关：

• 滤镜复用情况：复用滤镜的前提下，DOM层面不会有额外开销，不会因为路径数量多导致SVG定义体积暴增
• 模糊半径大小：半径越大，每帧的像素计算量越高，性能损耗越大
• 路径尺寸与数量：单个路径尺寸越大、应用模糊的路径总数越多，渲染开销越高
• 路径动态属性：如果路径是静态的（不会移动、变形、显隐切换），浏览器只会计算一次模糊，性能影响很小；如果是高频更新的动态路径，数百个路径叠加大半径模糊可能会导致中低端设备帧率掉到30以下

如果不需要对每个路径做单独交互，最优优化方案是把所有需要应用相同模糊的路径放到同一个paper.Group中，仅给Group应用一次模糊，这样浏览器只会对整个组的合并结果做一次模糊计算，性能比单个路径分别应用模糊高5~10倍。

内容的提问来源于stack exchange，提问作者Paint Laurent