在QML中对部分图像添加模糊效果

Question

我正在尝试在 QtQucick 应用程序中的图像上添加一些模糊效果。以下是一个简单的片段，可以加载图像并在其上放置自定义多边形。我应该在代码中添加什么以使多边形内部看起来模糊！

提前致谢。

import QtQuick 2.15
import QtQuick.Window 2.15

Window
{
    id: main_window

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property var mpoints: [Qt.point(20, 20), Qt.point(20, 300), Qt.point(300, 300), Qt.point(300, 20)]

    Image
    {
        id: m_image

        anchors.fill: parent

        source: "file:///C:/Users/LeXela/Pictures/test.jpg"
        cache: false
    }

    Canvas
    {
        anchors.fill: parent

        onPaint:
        {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, main_window.width, main_window.height);

            ctx.globalCompositeOperation = "source-over";

            ctx.fillStyle = "white";
            ctx.globalAlpha = 0.6;

            ctx.beginPath();
            ctx.moveTo(mpoints[0].x, mpoints[0].y)
            for(let i = 1; i < mpoints.length; i++)
                ctx.lineTo(mpoints[i].x, mpoints[i].y);
            ctx.closePath();

            ctx.fill();
            ctx.stroke();
        }
    }
}

Answer 1

您可以通过设置

sourceSize

，对第二个实例 (1) 进行剪辑并 (2) 以较低分辨率采样来渲染图像两次。

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
Page {
    Image
    {
        id: img
        width: 400
        height: 350
        source: "butterfly.png"
    }

    Item {
        id: blur
        x: 150
        y: 120
        width: 100
        height: 100
        clip: true
        Image {
            x: -blur.x
            y: -blur.y
            width: img.width
            height: img.height
            source: "butterfly.png"
            sourceSize: Qt.size(32, 32)
        }
    }
}

// butterfly.png : https://raw.githubusercontent.com/stephenquan/stephenquan.github.io/master/images/qt/Original_butterfly.png

您可以在线尝试！

要更改为自定义多边形剪辑，您可以将 OpacityMask 与 Shape 结合使用。