[英]QML Shader Effect blur behind an item
Is it possible to make a blur of an item which is behind another item? 是否可以模糊其他项目背后的项目?
Example: blur a part of image (like in qml - parent.centerIn: image) 示例:模糊图像的一部分(如qml中 - parent.centerIn:image)
I want something like: 我想要的东西:
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" */
}
}
This question affects any shader effect
because official docs dont have an answer for the question and all of my attempts are unsuccessfull - it is only possible to blur WHOLE ITEM but not a part of it. 这个问题影响任何
shader effect
因为官方文档没有问题的答案,我的所有尝试都没有成功 - 它只能模糊整个项目而不是它的一部分。
Here is my solution. 这是我的解决方案。 This version is just applicable to Rectangles.
此版本仅适用于矩形。 The Item ShaderEffectSource helps with creating such a source rectangle.
Item ShaderEffectSource有助于创建这样的源矩形。
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
}
}
If you need other shapes, I think you might need to apply a mask-shader, cutting out the relevant parts first and then apply the blur. 如果您需要其他形状,我认为您可能需要应用蒙版着色器,首先剪切相关部分然后应用模糊。
Not the prettiest solution but I afraid there is no such Qml mechanism. 不是最漂亮的解决方案,但我担心没有这样的Qml机制。
You could apply on your image second image with same source and clip it to your needs, like below: 您可以在图像上应用具有相同来源的第二张图像并将其剪辑为您的需求,如下所示:
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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.