Размытый фон в Backgroud'е в главном окне



  • Всем привет!
    Возникла такая проблема: мне нужно сделать размытый фон, то есть Blur эффект в главном qml окне.
    Получается что родитель Window{} или ApplicationWindow{} не должен иметь в себе ничего, кроме этого размытого фона.

    Такой фон есть в Windows Vista, Windows 7, Windows 10 (панель пуска) и док панель на MacOS

    Можно и на Qt C++

    Вот что я написал:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtGraphicalEffects 1.0
    import QtWinExtras 1.0 as Win
    import QtQuick.Window 2.2
    
    Window {
    	id: window
    	visible: true
    	width: 640
    	height: 480
    	title: qsTr("Hello World")
    	color: "transparent"
    	flags: Qt.Window | Qt.FramelessWindowHint
    
    	//MouseArea для перемещения окна
    	MouseArea {
    		anchors.fill: parent
    		property variant clickPos: "1,1"
    
    		onPressed: clickPos = Qt.point(mouse.x, mouse.y)
    
    		onPositionChanged: {
    			var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
    			var new_x = window.x + delta.x
    			var new_y = window.y + delta.y
    			if(new_y <= 0)
    				window.visibility = Window.Maximized
    			else
    			{
    				if(window.visibility === Window.Maximized)
    					window.visibility = Window.Windowed
    				window.x = new_x
    				window.y = new_y
    			}
    		}
    	}
    	//==========
    
    	//flags: Qt.FramelessWindowHint
    	Image {
    		id: img
    		anchors.fill: parent
    		source: "image.png"
    
    		FastBlur {
    			anchors.fill: parent
    			source: parent
    			radius: 100
    		}
    	}
    
    //  Win.DwmFeatures {
    //	  topGlassMargin: -1
    //	  leftGlassMargin: -1
    //	  rightGlassMargin: -1
    //	  bottomGlassMargin: -1
    //  }
    	Button {
    		id: button
    		x: 187
    		y: 107
    		text: qsTr("Button")
    		onClicked: Qt.quit()
    	}
    }
    

    Скриншот: https://ibb.co/hZEFQG
    Ссылка на проект: тыц
    Почти неделю долбаюсь, помогите пожалуйста.



  • Ну вот я уже вижу import QtGraphicalEffects 1.0. Судя по документации, ссталось только добавить GaussianBlur в Window и будет то что надо



  • @Konstantin-Tokarev said in Размытый фон в Backgroud'е в главном окне:

    Ну вот я уже вижу import QtGraphicalEffects 1.0. Судя по документации, ссталось только добавить GaussianBlur в Window и будет то что надо

    Всё не так просто. Если я добавляю какой-то blur эффект в Window, то никакого результата нету вообще.
    А если сохранить рамку окна, то будет вот что (здесь фотография потому что если делать скриншот, то ничего этого видно не будет, по этому я убрал рамку): 0_1512018395724_sof.jpg

    Неужели это так сложно?



  • Попробуйте на весь Window сделать белый прямоугольник полупрозрачный с размытием.



  • @TheGringerEye said in Размытый фон в Backgroud'е в главном окне:

    Попробуйте на весь Window сделать белый прямоугольник полупрозрачный с размытием.

    Вы имели в ввиду вот так?

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtGraphicalEffects 1.0
    import QtWinExtras 1.0 as Win
    import QtQuick.Window 2.2
    
    Window {
    	id: window
    	visible: true
    	width: 640
    	height: 480
    	color: "transparent"
    	flags: Qt.Window | Qt.FramelessWindowHint
    
    	Button {
    		id: button
    		x: 187
    		y: 107
    		text: qsTr("Button")
    		onClicked: Qt.quit()
    	}
    
    	Rectangle {
    		id: parentRect
    		anchors.fill: parent
    		color: "transparent"
    		border.color: "red"
    
    		GaussianBlur {
    			anchors.fill: parentRect
    			source: parentRect
    			deviation: 4
    			radius: 8
    			samples: 16
    		}
    	}
    }
    

    Если да, то вот результат:
    0_1512105980584_2.png

    Насколько я вижу, то размывается только передний фон, задний фон остаётся незатронутым (видно по куску текста). Красную рамку сделал специально, чтобы видеть края окна

    Какие ещё идеи будут? Буду очень благодарен. Честно.



    • Перед показом прозрачного окна захватить скриншот окна на заднем плане, и дальше размывать эту картинку

    • Использовать нативный API винды, если такой есть

    По-другому вряд ли получится, так как по-честному такую операцию может выполнить только window manager, отрисовывающий содержимое всех окон на экран. (Полупрозрачность - пожалуйста, добавили альфа канал и WM все скомпозитит. Размытие требует нелинейной операции над пикселями чужого окна)





  • @TheGringerEye said in Размытый фон в Backgroud'е в главном окне:

    @razorqhex Вопросы по вашей теме - https://stackoverflow.com/questions/28947025/qt-qml-how-to-create-a-frameless-window-with-aero-blurred-background
    https://stackoverflow.com/questions/19383427/blur-effect-over-a-qwidget-in-qt
    http://www.qtcentre.org/threads/68813-How-to-achive-blur-background-window-as-shown
    http://blog.qt.io/blog/2009/09/15/using-blur-behind-on-windows/
    Из них ничего не подходит?

    Нет :(
    Первая ссылка: это работает только на Windows, где есть поддержка Aero (у меня 8-ка)
    Вторая ссылка: блюрит только передний фон, и то, если есть задний фон в целом. Если нету, то будет просто черный экран или просто прозрачный фон но не блюр
    Третья ссылка: внушает доверие. Надо попробовать
    Четвертая ссылка: тоже не подходит



  • @razorqhex Ну я думаю логично, что всякие блюры это достаточно специфичная штука, полагаю нативно блюры будут в висте, семёрке, 10тке, из виндовс семейства, как в линуксах я не знаю, ну если хотите кроссплатформленно, то надо как и сказал выше Константин, брать и скринить область под окном и мылить её, но не знаю что будет по производительности в этом случае.



  • @TheGringerEye я думаю, что с производительностью будет довольно худо. Это разве что нужно сделать окно неподвижным и тогда всё будет хорошо



  • Можно схитрить и сделать при показе окна скриншот всего экрана, заблюрить, поставить фоном окна с офсетом по (x, y) и при перемещении окна менять офсет


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.