首页 文章

QML着色器效果在项目后面模糊

提问于
浏览 次
4

是否可以模糊其他项目背后的项目？

示例：模糊图像的一部分（如qml中 - parent.centerIn：image）

Blur example

我想要的东西：

Image { id: img
    anchors.fill: parent
    source: "bug.png"

    Item { id: info
        anchors.centerIn: parent
        height: 200
        width: 200

        Text {
            text: "HAMMER TIME"
            color: "white"
        }

        /* BLUR CODE HERE TO BLUR BACKGROUND OF THIS ITEM */
        /* which is a part of "bug.png" image with 200x200 size */
        /* and offset equals to "info.x" and "info.y" */
    }
}

这个问题影响到任何 shader effect 因为官方文档没有问题的答案，我的所有尝试都没有成功 - 它只能模糊整个项目而不是它的一部分 .

javascript qt qml effects

2 回答

  • 6

    这是我的解决方案 . 此版本仅适用于矩形 . Item ShaderEffectSource有助于创建这样的源矩形 .

    enter image description here

    import QtQuick 2.3
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 600
    height:600

    Image {
        id: image_bug

        anchors.fill: parent
        source: "images/Original_bug.png"
    }

    ShaderEffectSource {
        id: effectSource

        sourceItem: image_bug
        anchors.centerIn: image_bug
        width: 400
        height: 400
        sourceRect: Qt.rect(x,y, width, height)
    }

    FastBlur{
        id: blur
        anchors.fill: effectSource

        source: effectSource
        radius: 100
    }
}

    如果您需要其他形状，我认为您可能需要应用蒙版着色器，首先剪切相关部分然后应用模糊 .

    回复于
  • 0

    不是最漂亮的解决方案，但我担心没有这样的Qml机制 .
    您可以在图像上应用具有相同来源的第二张图像并将其剪辑为您的需求，如下所示：

    Image {
    id: img
    anchors.fill: parent
    source: "bug.png"

    Item { id: info
        anchors.centerIn: parent
        height: 200
        width: 200

    Text {
        text: "HAMMER TIME"
        color: "white"
    }

    /* BLUR CODE HERE TO BLUR BACKGROUND OF THIS ITEM */
    /* which is a part of "bug.png" image with 200x200 size */
    /* and offset equals to "info.x" and "info.y" */

    clip:true
    Image {
        id: img2
        x: -info.x
        y: -info.y
        width: img.width
        height: img.height
        source: img.source
    }
    FastBlur {
        anchors.fill: img2
        source: img2
        radius: 32
    }
}
    回复于

相关问题