Question

单击图像以找到路径。击中三个或更多通行证后单击第一个点以关闭通行证。当路径关闭时，我想选择路径的内部并实现模糊范围的功能。当前，当您关闭路径时，什么也不会发生。

Answer 1

我认为您误会了Paper.js渲染引擎。
它在<canvas>元素的上下文中绘制项目，因此您可以从开发人员工具访问的只是此画布及其图像数据。
您将无法使用选择器来定位路径并对其执行操作。

很遗憾，Paper.js目前不支持过滤器。
因此，一种选择可能是利用画布上下文的filter属性（实验性）或自己实现模糊算法。
然后，在保留Paper.js实用程序进行绘制的同时，您可以管理多个画布并进行智能合成以产生所需的效果。

这里是fiddle，演示了可能的实现。
请注意，为演示起见，我简化了您的用例，但您应该能够轻松地使其适应您的用例。
在此示例中，我使用了3种不同的画布：
-底部用于绘制原始图像
-中间一个用于绘制模糊的部分
-顶部是用于绘制我们将用于合成的形状，并且将被隐藏在最后

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-core.min.js"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        /* We position canvases on top of each other. */
        canvas {
            position : absolute;
            top      : 0;
            left     : 0;
            width    : 100vw;
            height   : 100vh;
        }
    </style>
</head>
<body>
<canvas id="bottom-canvas"></canvas>
<canvas id="middle-canvas"></canvas>
<canvas id="top-canvas"></canvas>
<script>
    // Get canvases references.
    const bottomCanvas = document.getElementById('bottom-canvas');
    const middleCanvas = document.getElementById('middle-canvas');
    const topCanvas = document.getElementById('top-canvas');

    // Initialise 2 PaperScopes.
    const bottomScope = new paper.PaperScope();
    bottomScope.setup(bottomCanvas);
    const topScope = new paper.PaperScope();
    topScope.setup(topCanvas);

    // For middle canvas, we need to adjust the size manually as Paper.js doesn't handle it.
    middleCanvas.width = middleCanvas.offsetWidth;
    middleCanvas.height = middleCanvas.offsetHeight;

    // Draw the image on the bottom canvas.
    new paper.Raster({
        source: 'https://i.imgur.com/6N0Zwag.jpg',
        crossOrigin: 'anonymous',
        position: bottomScope.view.center,
        parent: bottomScope.project.activeLayer,
        // When image is loaded...
        onLoad: function() {
            // ...make it fit the whole canvas.
            this.fitBounds(bottomScope.view.bounds, true);

            // Draw a circle on the top canvas that represents the user drawn shape
            // that we want to use for blurring.
            new paper.Path.Circle({
                center: topScope.view.center,
                radius: 200,
                fillColor: 'orange',
                parent: topScope.project.activeLayer
            });

            // We manually call the canvas view update to make sure that everything
            // is drawn before we play with image data.
            bottomScope.view.update();
            topScope.view.update();

            // Get middle canvas context to be able to draw on it.
            const middleCanvasContext = middleCanvas.getContext('2d');
            // Draw the bottom canvas image on the middle canvas with the blur filter applied.
            middleCanvasContext.filter = 'blur(15px)';
            middleCanvasContext.drawImage(bottomCanvas, 0, 0);

            // In order to see the clear part of the bottom canvas image,
            // we need to remove from middle canvas what is not on top canvas.
            // For that, we use "destination-in" composite operation.
            middleCanvasContext.filter = 'none';
            middleCanvasContext.globalCompositeOperation = 'destination-in';
            middleCanvasContext.drawImage(topCanvas, 0, 0);

            // Now, we need to hide the top canvas, to see the middle one below it.
            topCanvas.style.display = 'none';
        }
    });
</script>
</body>
</html>

我想应用滤镜：模糊任何形状

1 个答案: