如何在QML中为图片的指定多边形区域添加模糊效果？

要让Canvas绘制的多边形内部区域呈现图片模糊效果，你可以通过模糊图片+Canvas裁剪的方式实现，以下是修改后的完整代码及关键说明：

修改后的代码 #

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Effects 1.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裁剪）
    Image
    {
        id: blurred_image
        anchors.fill: parent
        source: m_image.source
        cache: false
        visible: false
        effect: BlurEffect {
            radius: 10    // 模糊半径，数值越大模糊程度越高
            samples: 20   // 采样数，数值越高模糊质量越好（性能消耗也越高）
        }
    }

    Canvas
    {
        anchors.fill: parent

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

            // 1. 设置多边形为裁剪区域
            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.clip(); // 后续绘制仅在多边形内部生效

            // 2. 将模糊图片绘制到裁剪区域内
            ctx.drawImage(blurred_image, 0, 0, main_window.width, main_window.height);

            // 3. 恢复裁剪，绘制多边形边框
            ctx.save();
            ctx.resetClip();
            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.strokeStyle = "white";
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.restore();
        }
    }
}

关键实现逻辑 #

1. 模糊图片准备：

   • 复制一份原始图片，添加BlurEffect实现模糊效果，设置visible: false避免直接显示
   • 通过radius和samples参数调整模糊程度与质量

2. Canvas裁剪与绘制：

   • 先绘制多边形路径并调用ctx.clip()，将后续绘制范围限制在多边形内部
   • 绘制模糊图片，此时只有多边形区域会显示模糊效果
   • 重置裁剪区域后，重新绘制多边形边框，保证边框清晰可见

替代方案（针对低版本Qt） #

如果你的Qt版本低于5.10，BlurEffect可能不可用，可以改用FastBlur效果：

effect: FastBlur {
    radius: 10
}

内容的提问来源于stack exchange，提问作者LeXela-ED