How to drag dynamic object in Qml?



  • Dear all,

    I seek your help in this problem which I am stucked in.

    I have an icon which when I pressed it, I will create an object of it, named as iconObj. But how do I drag this newly created object? Is it possible to do this in QML? I have error when I set the drag.target: iconObj.
    @
    Image {
    id: icon
    width: 64
    height: 64
    source: "liverbird.gif"

           MouseArea {
               id: liverbirdMouseArea
               anchors.fill: parent
               width: 64
               height: 64
    
               drag.target: parent
               drag.axis: Drag.XandYAxis
               onPressed: {
                   var iconObj = Qt.createComponent("icon.qml");
                   iconObj.createObject(parent);
               }                             
           }
       }
    

    @

    Thank you for your kind help.



  • Perhaps this is what you want?

    @
    import QtQuick 1.0

    Image {
    id: icon
    width: 64
    height: 64
    source: "liverbird.gif"

    MouseArea {
        id: liverbirdMouseArea
        anchors.fill: parent
    
        property variant iconObj
        property int startX
        property int startY
    
        onPressed: {
            startX = mouseX
            startY = mouseY
            var iconComp = Qt.createComponent("icon.qml");
            iconObj = iconComp.createObject(parent);
            iconObj.x = mouseX - iconObj.width/2
            iconObj.y = mouseY - iconObj.height/2
        }
        onPositionChanged: {
            iconObj.x += mouseX - startX
            iconObj.y += mouseY - startY
            startX = mouseX
            startY = mouseY
        }
        onReleased: {
            iconObj.destroy()
        }
    }
    

    }
    @



  • I bounce on this topic because i'm doing the same thing but I want to be able to drag an object even if it has been scaled and rotated. So I'm trying use mapToItem function but when i drag my object they shake

    @import QtQuick 1.0

    Rectangle {
    width: 360
    height: 360
    id :root
    Rectangle{
    id : zoom
    anchors.fill: parent
    scale: 1.4
    rotation: 45
    Image {
    id: img
    source: "lenna.png"
    }
    }
    MouseArea {
    anchors.fill: parent
    property real old_x : 0
    property real old_y : 0

    onPressed:{
    var tmp = root.mapToItem(img,mouse.x,mouse.y);
    old_x = tmp.x;
    old_y = tmp.y;
    }

    onPositionChanged: {
    var tmp = root.mapToItem(img,mouse.x,mouse.y);
    var delta_x = tmp.x - old_x;
    var delta_y = tmp.y - old_y;
    img.x+=delta_x;
    img.y+=delta_y;
    old_x = tmp.x;
    old_y = tmp.y;
    }
    }
    }
    @

    I've looked in the source code of the mousearea but the same thing is done in C++...



  • The changes below fix the problem. Dragging moves the "zoom" item not the "img" item, and the coordinate mapping was wrong.

    @
    import QtQuick 1.0

    Rectangle {
    width: 360
    height: 360
    id :root
    Rectangle{
    id : zoom
    // anchors.fill: parent
    scale: 1.4
    rotation: 45
    Image {
    id: img
    source: "lenna.png"
    }
    }
    MouseArea {
    anchors.fill: parent
    property real old_x : 0
    property real old_y : 0

        onPressed:{
    

    // var tmp = root.mapToItem(img,mouse.x,mouse.y);
    var tmp = mapToItem(root, mouse.x, mouse.y);
    old_x = tmp.x;
    old_y = tmp.y;
    }

        onPositionChanged: {
    

    // var tmp = root.mapToItem(img,mouse.x,mouse.y);
    var tmp = mapToItem(root, mouse.x, mouse.y);
    var delta_x = tmp.x - old_x;
    var delta_y = tmp.y - old_y;
    zoom.x += delta_x;
    zoom.y += delta_y;
    old_x = tmp.x;
    old_y = tmp.y;
    }
    }
    }
    @



  • Hi Bradley and Matahari

    Thank you for your kind help and your solution, I have been trying to get solution like yours, by making changes in the main qml file. But in the end I realise we can also make changes in the icon.qml, to make the instantiated object to be dragable.

    @
    Image {
    id: icon
    width: 64
    height: 64
    source: "liverbird.gif"

    MouseArea {
        id: iconMouseArea
        anchors.fill: parent
        width: 64
        height: 64
    
        drag.target: parent
        drag.axis: Drag.XandYAxis
    
    }
    

    }
    @



  • Hi, Bradley thanks for your code, thats fix indeed the problem but I've done this way because I wanted o have the center of the transformation to be on the center of the screen. The easiest solution I've found was to transform parent item but then I need to change system coordinate for dragging image.And saddly, Your solution move the center of the transformation to the top left corner of the image.

    By adding @anchors.centerIn: parent@ to the image I've got the center of the transformation to the center of the image, but that still not what I want. The only working solution I've got is to use dragging with MouseArea but I can't use it for external reason, so I've look into the source code of the MouseArea and I try to adapt it into js function.

    Thanks again for your help.



  • I found it
    @import QtQuick 1.0

    Rectangle {
    id :root

    property real mapZoom: 1.0
    property real mapAngle: 45.0

    function move(x,y)
    {
    var tmp = mapToItem(img, x, y);
    var origine = mapToItem(img, 0, 0);
    img.x += tmp.x - origine.x;
    img.y += tmp.y - origine.y;s
    }

    Rectangle{
    id : zoom

    anchors.fill: parent
    scale: mapZoom
    rotation: mapAngle
    Image {
    id: img
    source: "lena.png"
    }
    }
    }@

    Thanks again for your help.


Log in to reply
 

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