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

        }
    }
    

    }@



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



  • 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



  • That I don't know, sorry.


  • Moderators

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


  • Moderators

    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


Log in to reply
 

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