QML Drag: Create a shapshot of the dragged item
-
Hi there,
In the QtQuick dragandddrop (DragTime qml code below) example the drag targed is the tile item itself.
What if instead of dragging the tile item i want to drag a snapshot representation of it (an image) ?So in pseudo code something like :
draggedItem = tile.grabSnapShotHow to achieve this in qml ?
Thanks a lot for the help,
Ben
DragTile.qml :
@Item {
id: root
property string colorKeywidth: 64; height: 64 MouseArea { id: mouseArea width: 64; height: 64 anchors.centerIn: parent drag.target: tile onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root Rectangle { id: tile width: 64; height: 64 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter color: colorKey Drag.keys: [ colorKey ] Drag.active: mouseArea.drag.active Drag.hotSpot.x: 32 Drag.hotSpot.y: 32
//! [0]
Text {
anchors.fill: parent
color: "white"
font.pixelSize: 48
text: modelData + 1
horizontalAlignment:Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
//! [1]
states: State {
when: mouseArea.drag.active
ParentChange { target: tile; parent: root }
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}} }
}@
-
Thanks a lot for the reply,
but what I need to do in order to create a snapshot (like a screen capture) of the component that I'm going to drag and drag that instead ?Thanks a lot,
for all the help,
Ben
-
bq. but what I need to do in order to create a snapshot (like a screen capture) of the component that I’m going to drag and drag that instead ?
May be something similar can be achieved with "grabToImage()":http://doc.qt.io/qt-5/qml-qtquick-item.html#grabToImage-method. Check its second example.
-
Unfortunately doesn't seems to work when the qml item is hosted in a qquickwidget.
as proof I've modified the quick widget example that comes with qt (the one with the rotating red square) in the following way (I've omitted the copyright info just to shorten the code):
@
//rotatingsquare.qml
import QtQuick 2.4Rectangle {
id: root
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
root.grabToImage(
function(result) {
image.source = result.url;
},
Qt.size(200, 200)
);
}
}
Image {
id: image} Rectangle { property int d: 100 id: square width: d height: d anchors.centerIn: parent color: "red" NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; } } Text { anchors.centerIn: parent text: "Qt Quick running in a widget" }
}
@Unfortunately when I click on the red square I get is the following error message on the console:
Item::grabToImage: item's window is not visibleIs it a bug ?
If so how do I create a bug report ?Thanks a lot,
Ben
-
I'm not sure that is a bug but looking at the code "here":http://code.woboq.org/qt5/qtdeclarative/src/quick/items/qquickitemgrabresult.cpp.html#268 it seems they have added this check for some reason. I would suggest you to ask it on "Qt Mailing List":http://lists.qt-project.org/mailman/listinfo/interest so that you would get answer directly from Qt Engineers.
Alternatively since QQuickWidget is a QWidget, you can use "QWidget:grab()":http://doc.qt.io/qt-5/qwidget.html#grab. But that would be on C++ side. However you can add some code to get it on QML side. -
Hi there,
thank you very much for your advice .
I wrote to the mailing list and I'll wait for their reply.
The c++ approach is a solution but I would rather prefer to leave those things on the UI without involving any other extra c++.
I'll post any update I'll receive from the mailing list.Thanks again for all the help,
Ben