How to drag dynamic object in Qml?

franziss

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.

baysmith

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()
    }
}

}
@

Matahari

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

baysmith

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;
}
}
}
@

franziss

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

}

}
@

Matahari

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.

Matahari

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.