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

Posted 2023-03-24

【中文标题】如何模糊 Paper.js 中的封闭路径元素？

【英文标题】：How to blur a closed path element in Paper.js?

【发布时间】：2021-12-20 20:57:19

【问题描述】：

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

【问题讨论】：

感谢您的回复，但是这并不能回答问题。但是，根据您的回答，我可以假设应用 feGaussianBlur 是唯一的方法，并且我最终需要为我想要模糊的每条路径创建多个模糊元素。特别是如果我不希望所有路径都使用相同的模糊。

您可以使用 currentColor 或 CSS 变量来拥有一个与其过滤对象的颜色相匹配的过滤器。

【参考方案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');

【讨论】：

完美，这正是我想要的。想过做这样的事情，但不知道如何获得透明填充。谢谢！

所以乘法很酷，但是如何在不乘法的情况下将多个对象堆叠在一起来实现这一点？例如，如果我放下一个红色的模糊物体，然后在其上放一个较浅的红色物体，较浅的红色物体就会消失或几乎看不到。也许有一些技巧，在模糊的父级上方添加第二条不透明的路径并缩放到模糊开始的位置？我猜改变模糊量会改变子元素的比例？

如何定位路径元素以添加 feGaussianBlur？

查看我的编辑以获得更高级的解决方案。