QML Drag: Create a shapshot of the dragged item

[mandragora]

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.grabSnapShot

How to achieve this in qml ?

Thanks a lot for the help,

Ben

DragTile.qml :
@Item {
id: root
property string colorKey

width: 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 }
}

    }
}

}@

[t3685]

What I do is create an element of type of snapshot and set it to invisible. When the drag start I make the snapshot visible (set any visual properties I need) and use that to drag and drop.

[mandragora]

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

[t3685]

That I don't know, sorry.

[p3c0]

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.

[mandragora]

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.4

Rectangle {
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 visible

Is it a bug ?
If so how do I create a bug report ?

Thanks a lot,

Ben

[p3c0]

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.

[mandragora]

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