如何模糊 Paper.js 中的封闭路径元素？

Question

是否可以使用 paperjs 模糊具有填充的封闭路径元素？我是否必须为要模糊的每条路径创建一个 SVG feGaussianBlur 原语？如果画布上有几百个路径元素，这将如何影响性能？我考虑过使用带有一些颜色魔法的 shadowBlur，阴影将与所选路径匹配，但效果并不完全相同。我不想使用光栅。

Answer 1

一个技巧可能是使用项目的shadowBlur 属性。
唯一的问题是只有在项目有填充时才会绘制阴影。
而且我们不希望显示填充，而只显示阴影。
所以我们可以巧妙地使用混合模式来隐藏填充而不是阴影。
这是一个简单的sketch 演示。

new Path.Circle({
    center: view.center,
    radius: 50,
    shadowColor: 'black',
    shadowBlur: 20,
    selected: true,
    // set a fill color to make sure that the shadow is displayed
    fillColor: 'white',
    // use blendmode to hide the fill and only see the shadow
    blendMode: 'multiply',
});

---

编辑

当试图将项目堆叠在一起时，这种技术确实似乎达到了极限。
我们可以通过将项目包装到混合模式为source-over 的组中来防止multiply 混合模式“溢出”。这会影响子混合模式的范围。
但是仍然有一个技巧可以找到将项目组合在一起的技巧。
这是sketch，展示了我停止调查的地方。
我很确定您可以按照这条路线找到解决方案。

function drawBlurryCircle(center, radius, blurAmount, color) {
    const circle = new Path.Circle({
        center,
        radius,
        shadowColor: color,
        shadowBlur: blurAmount,
        // set a fill color to make sure that the shadow is displayed
        fillColor: 'white',
        // use blendmode to hide the fill and only see the shadow
        blendMode: 'multiply'
    });

    const blurPlaceholder = circle
        .clone()
        .set({ shadowColor: null, fillColor: null })
        .scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width);

    return new Group({
        children: [circle, blurPlaceholder],
        blendMode: 'source-over'
    });
}

drawBlurryCircle(view.center, 50, 20, 'red');
drawBlurryCircle(view.center + 30, 40, 30, 'lime');
drawBlurryCircle(view.center + 60, 30, 30, 'blue');