我正在尝试在 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();
}
}
}
您可以通过设置
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 结合使用。