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.0Image {
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 : 0onPressed:{
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.0Rectangle {
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 : 0onPressed:{
// 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.0Rectangle {
id :rootproperty real mapZoom: 1.0
property real mapAngle: 45.0function 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 : zoomanchors.fill: parent
scale: mapZoom
rotation: mapAngle
Image {
id: img
source: "lena.png"
}
}
}@Thanks again for your help.