时间戳

首页 > 解决方案 > 如何模糊 Paper.js 中的封闭路径元素？

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

问题描述

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

标签： javascriptsvghtml5-canvaspaperjsgaussianblur

解决方案

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

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',
});

编辑

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


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');

推荐阅读