I have a list view which need to be masked by an image.
Because am using a highlight component whose width need to be reduced according to the scrolling.
Is it possible with this code ? If anything wrong in this please suggest me some methods.
Item{
id: test
x: 0
y: 0
width: 1920
height: 720
ListView {
id: source_list
x: 0
y: 0
width: 600
height: 720
spacing: 40
model: mediaSongsModel
delegate: mediaSongsDelegate
focus: true
interactive: true
highlightFollowsCurrentItem: true
highlightMoveDuration: 0
highlight: highlightBar
snapMode: ListView.SnapOneItem
preferredHighlightBegin:260/scaleFactor
preferredHighlightEnd: 260/scaleFactor
highlightRangeMode : ListView.ApplyRange
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource:Item {
width: 100
height: 500
Image{
id :crop
x: 0
y: 0
width: 600
height: 720
source :"image/bg.png"
}
}
}
}
Something as you already did:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 600
height: 600
Rectangle {
id: rect
width: 400
height: 400
anchors.centerIn: parent
color: "black"
visible: (img.status == Image.Ready)
ListView {
anchors.fill: parent
model: 30
delegate: Text { text: "itemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm" + index; color: "yellow" }
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: img
}
}
Image {
id: img
source: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png"
width: 400
height: 400
anchors.centerIn: parent
visible: false
}
}
But I don't think you can mask mouse events.
Related
Is it possible in QML, maybe using shader effects with layers, to create an item that makes another item (with a higher z index) visible only when the two layers overlap? I've been messing aroud with OpacityMask and ThresholdMask but have been unable to figure it out. The effect I'm looking for in the context of the example below would be if the the black circle was only visible when the two red squares are under it:
current:
desired:
Some key points are that the bottom layer (red squares) must be moveable (OpacityMask doesn't seem to let you drag the maskSource) and the bottom layer needs to also be able to contain other elements within it that the black circle responds to. Any guidance towards the right things to learn in order to achieve this would be appreciated. Here is the QML for the red squares and black circle thing. The red squares are draggable as one element:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
Window {
id: main_window
visible: true
width: 1500
height: 1000
title: qsTr("Hello World")
Item {
width: main_window.width
height: main_window.height
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(main_window.width, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "#003cff" }
GradientStop { position: 1.0; color: "#9afff9" }
}
}
}
Rectangle {
id: sfg
width: 175
height: 75
color: 'transparent'
RowLayout {
width: parent.width
height: parent.height
spacing: 25
Rectangle {
Layout.preferredWidth: 75
Layout.fillWidth: false
Layout.fillHeight: true
color: 'red'
}
Rectangle {
Layout.preferredWidth: 75
Layout.fillWidth: false
Layout.fillHeight: true
color: 'red'
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
drag {
target: sfg
}
}
}
Rectangle {
id: mask
color: 'black'
x: 400
y: 200
width: 100
height: 100
visible: true
opacity: 1
radius: 50
}
}
Like this?
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
Window {
id: main_window
visible: true
width: 1500
height: 1000
title: qsTr("Hello World")
Item {
width: main_window.width
height: main_window.height
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(main_window.width, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "#003cff" }
GradientStop { position: 1.0; color: "#9afff9" }
}
}
}
Rectangle {
id: sgfBox
anchors.fill: parent
color: "transparent"
Rectangle {
id: sfg
width: 175
height: 75
color: 'transparent'
RowLayout {
width: parent.width
height: parent.height
spacing: 25
Rectangle {
Layout.preferredWidth: 75
Layout.fillWidth: false
Layout.fillHeight: true
color: 'red'
}
Rectangle {
Layout.preferredWidth: 75
Layout.fillWidth: false
Layout.fillHeight: true
color: 'red'
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
drag {
target: sfg
}
}
}
}
Rectangle {
id: mask
anchors.fill: parent
color: "transparent"
Rectangle {
color: 'black'
x: 400
y: 200
width: 100
height: 100
opacity: 1
radius: 50
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: sgfBox
}
}
}
When I execute my QML code, the output is:
When I minimize the window, It becomes like
and finally, when I again maximize the window it changes to
the GUI which I want to make looks like
![][5]
I am not getting what is the issue for all of the changes in GUI at different events. And this is the Qml code which I wrote
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 1080
height: 720
title: qsTr("Login")
GridLayout{
Rectangle{
id:one
Rectangle
{ id:two
color:"black";
width: 700
height:40
}
Image {
id: image
x: 470
y: 0
width: 54
height: 42
source: "qrc:/user.png"
}
Rectangle
{
id:three;
color:"#f47a42";
width: 200
height:40
anchors.left:two.right;
anchors.margins:940
Text {
id: user
text: qsTr("4200")
color:"white"
anchors.top: value.bottom
}
Text
{
id: value;
text: qsTr("User");
color:"yellow"
}}
}
}
Rectangle{
ColumnLayout{
width: 50
height: childrenRect.height+fillHeight;
}
color:"green"
}
}
So why this is happening and how can I solve this problem?
Output of the code below
Here is example of scalable window:
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
Window {
visible: true
width: 800
height: 600
title: qsTr("Layout example")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 40
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "orange"
Text {
anchors.centerIn: parent
text: "Title"
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "Actions"
}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
text: "Content"
}
}
}
}
I was wondering either the following functionality is available in QML: I need for a child object (a text here) to always stay on top of other object, no matter the child/ parent connection. Here is a MWE:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
id: rectMain;
anchors.centerIn: parent
width: parent.width
height: parent.height
color: "white"
Rectangle
{
id: rect1;
width: 200;
height: 200;
x: 100;
y: 100;
color: "red";
Text
{
id: theText;
text: qsTr("text");
anchors.centerIn: parent;
}
}
Rectangle
{
id: rect2;
width: 200;
height: 200;
x: 200;
y: 200;
color: "yellow";
}
}
}
It will show this window:
As you can see the "text" is covered with rec2, as it's a child of rect1, which was created prior to rect2. Is it possible for the text to be always on top of rect2 with current parent/ child connection?
This is the idea I expressed above. But I really can imagine for myself how that could be used. If you could define your real goals we will find another solution, of course.
import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
width: 400
height: 400
visible: true
title: "Example"
Item {
z: 1
Repeater {
id: rectGenerator
property bool loaded: false
Component.onCompleted: rectGenerator.loaded = true
model: 10
delegate: Rectangle {
width: 100
height: 100
color: Qt.rgba(Math.random(),Math.random(),Math.random(),0.8)
x: Math.round(Math.random() * 300)
y: Math.round(Math.random() * 300)
Drag.active: dragArea.drag.active
MouseArea {
id: dragArea
anchors.fill: parent
drag.target: parent
}
}
}
}
Loader {
z: 2
sourceComponent: Repeater {
model: rectGenerator.model
delegate: Text {
x: rectGenerator.itemAt(index).x
y: rectGenerator.itemAt(index).y
width: 100
height: 100
text: "item " + (index + 1)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
active: rectGenerator.loaded
}
}
There is a question How to hide an image using transparent rectangle in QML?
The accepted answer is to use OpacityMask.
I created a qml file follow this answer, but didn't get the expected result.
Is there anything wrong in my codes?
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask {
maskSource: hiding_rect
}
source:"qrc:/timg.jpg"
}
Rectangle
{
id:hiding_rect
width: underlyingImage.width/2
height: underlyingImage.height/2
color: "yellow"
}
}
the result picture
I'm not familiar with the approach suggested in the other question.
However, following the approach suggested in the documentation (http://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html), this works:
Window {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
anchors.centerIn: parent
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
source:"file:///tmp/timg.jpg"
visible: false
}
Item {
id:hiding_rect
anchors.fill: underlyingImage
visible: false
Rectangle
{
anchors.left: parent.left
anchors.top: parent.top
width: underlyingImage.width/2
height: underlyingImage.height/2
color: Qt.rgba(1,1,1,1)
z: underlyingImage.z + 1
}
}
OpacityMask {
anchors.fill: underlyingImage
source: underlyingImage
maskSource: hiding_rect
}
}
I am trying to make an app which shows 3 pages at a time. The central page shows 3 rectangles displying sql query results 1-3 , the left page is a link to an image from query result 4, and the right page is also built from the same query and has a different layout. Now I am unable to fit these 3 pages into a listmodel and use pathview to make it look like a paginator, because all 3 pages are incongruent and not really a model, hence giving me error ListElement: cannot contain nested elements. I am pasting the code below. All i want is for the user to be able to flick between the pages, whether that involves a pathview or statechange with a decent transition to mimick flipping pages :
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import "content"
Rectangle{
property ListModel mainModel
id: tripleView
visible: true
width: 800
height: 1400
PathView {
model: mainModel
delegate: mainDelegate
id: paginator
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
anchors.fill: parent
path: Path {
startX: -tripleView.width * mainModel.count / 2 + tripleView.width / 2;
startY: tripleView.height / 2
PathLine {
x: tripleView.width * mainModel.count /2 + tripleView.width / 2
y: tripleView.height * .5 }
}
}
Component {
id: mainDelegate
Rectangle {
width: tripleView.width
height: tripleView.height
}
}
ListModel {
id: regionsModel
ListElement {
name: "Stomach"
}
ListElement {
name: "Lung"
}
ListElement {
name: "Colorectal"
}
ListElement {
name: "Pancreas"
}
ListElement {
name: "Urinary Bladder"
}
}
ListModel {
id: mainModel
ListElement{
Rectangle{
id: tnmPage
width: parent.width
height: container.height
Rectangle {
id: menu
z: 2
width: parent.width ;
height: 75
Component {
id: appDelegate
Rectangle {
width: genericText.width + 10; height: parent.height
id: wrapper
color: PathView.isCurrentItem ? "yellow" : "white"
Text {
id: genericText
height: parent.height
font.pointSize: 12
verticalAlignment: Text.AlignVCenter
// anchors.topMargin: wrapper.top
color: wrapper.PathView.isCurrentItem ? "red" : "black"
text: name
}
MouseArea {
// width:parent.width; height: parent.height
anchors.fill: parent
hoverEnabled: true
onClicked: {
var List = mWindow.printi(name)
t.content = List[1]
node.content = List[2]
mets.content = List[3]
view.currentIndex = index
}
}
}
}
PathView {
id: view
width: 2500
height: parent.height
anchors.rightMargin: 18
anchors.bottomMargin: 0
anchors.leftMargin: -18
anchors.topMargin: 0
anchors.fill: parent
// anchors.bottom: parent.bottom
// anchors.top: parent.top
// preferredHighlightBegin: .1
// preferredHighlightEnd: .6
highlightRangeMode: PathView.StrictlyEnforceRange
// anchors.rightMargin: 0
// anchors.bottomMargin: 0
// anchors.leftMargin: 2
// anchors.topMargin: -71
z: 1
highlight: Component {
Rectangle {
color: "yellow"
visible: PathView.onPath
}
}
focus: true
model: regionsModel
delegate: appDelegate
path: Path {
startX: 0; startY: view.height *.5
PathLine { x: menu.width; y: view.height * .5 }
}
}
}
Flickable {
id: flick
anchors.topMargin: menu.bottom
width: parent. width
height: parent. height - menu.height
contentWidth: parent.width+200
contentHeight: container.height // this is calculated on amount of text
PinchArea {
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.height, flick.height)
pinch.minimumScale: 0.5
pinch.maximumScale: 3
property real initialWidth
property real initialHeight
x: 0
y: 0
//![0]
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
flick.interactive = false
}
onPinchUpdated: {
t.fontSize = t.size*pinch.scale
node.fontSize = node.size * pinch.scale
mets.fontSize = mets.size * pinch.scale
}
onPinchFinished: {
flick.returnToBounds()
flick.interactive = true
}
Rectangle {
id: container
MouseArea {
anchors.fill: parent
onDoubleClicked: {
t.fontSize = 12
node.fontSize = t.size
mets.fontSize = t.size
}
}
anchors.top: flick.top
width: parent.width
height: t.height + node.height + mets.height
StageBox {
id: t
anchors.top: container.top
color: "#6acbd3"
}
StageBox {
id: node
anchors.top: t.bottom
color: "#1fd77b"
}
StageBox {
id: mets
anchors.top: node.bottom
color: "blue"
}
}
}
}
}
}
I realise the code above is lengthy, but i think it will give some idea about what i am trying to achieve. The examples i have found so far have simple pages displaying images and no nesting. Thank you for your help.
Try QML type VisualItemModel http://qt-project.org/doc/qt-4.8/qml-visualitemmodel.html#details .good luck
I have managed a hack. Experimentally implemented in colored rectangles, this flickable behaves as a 3-page app starting at mid page and allowing flicking horizontally to access neighbouring pages. It works and I am sure with some tweaking it can suit similar applications as mine. Comments invited
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
Rectangle {
state: "baseState"
id: mainScreen
width: 400
height: 600
Text {
z:2
id: logTxt
height: 10
width: 20
function log(txt){
text = txt+"\n"
}
}
Flickable {
boundsBehavior: StopAtBounds
id: flick
y: 48
onContentXChanged: {
if(flick.contentX>100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="State1"
}
if(flick.contentX<-100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
mainScreen.state="State2"
logTxt.log(flick.contentX)
}
if(flick.contentX>100 && mainScreen.state=="State2" && flick.flickingHorizontally ){
mainScreen.state="baseState"
logTxt.log(flick.contentX)
flick.contentX=0
}
if(flick.contentX<-100 && mainScreen.state=="State1" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="baseState"
flick.contentX=0
logTxt.log(flick.contentX)
Timer
}
}
interactive: true
width: 400
height: 600
transformOrigin: Item.Center
flickableDirection: Flickable.HorizontalFlick
Rectangle {
width: 600
height: 600
id: container
Rectangle {
id:two
visible: false
x: 0
z:3
height: 600
width: 400
color: "grey"
}
Row{
id: testGrid
x:0
visible: true
y: 0
z: 3
width:600
height: 600
Rectangle {
id: a
anchors.top:parent.top
color:"#f6f7b1"
visible: true
z: 3
height: parent.height
width: 200
}
Rectangle {
id: b
anchors.top:parent.top
color:"#ffebeb"
visible: true
height: parent.height
width: 200
}
Rectangle {
id: c
y: -35
anchors.top:parent.top
color:"#b1d5f7"
height: parent.height
width: 200
}
}
Rectangle {
id: three
visible: false
z:2
x:0
height: parent.height
width: 400
color: "#028000"
}
}
}
states: [
State {
name: "State1"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: two
visible: true
}
PropertyChanges {
target: three
visible: false
}
},
State {
name: "State2"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: three
visible: true
}
PropertyChanges {
target: two
visible: false
}
},
State {
name: "baseState"
PropertyChanges {
target: testGrid
visible: true
}
PropertyChanges {
target: three
visible: false
}
PropertyChanges {
target: two
visible: false
}
}
]
}