May 28, 2011

franziss franziss
Lab Rat
50 posts

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.

  1.        Image {
  2.            id: icon
  3.            width: 64
  4.            height: 64
  5.            source: "liverbird.gif"
  6.  
  7.            MouseArea {
  8.                id: liverbirdMouseArea
  9.                anchors.fill: parent
  10.                width: 64
  11.                height: 64
  12.  
  13.                drag.target: parent
  14.                drag.axis: Drag.XandYAxis
  15.                onPressed: {
  16.                    var iconObj = Qt.createComponent("icon.qml");
  17.                    iconObj.createObject(parent);
  18.                }                            
  19.            }
  20.        }

Thank you for your kind help.

6 replies

May 29, 2011

Bradley Bradley
Lab Rat
314 posts

Perhaps this is what you want?

  1. import QtQuick 1.0
  2.  
  3. Image {
  4.     id: icon
  5.     width: 64
  6.     height: 64
  7.     source: "liverbird.gif"
  8.  
  9.     MouseArea {
  10.         id: liverbirdMouseArea
  11.         anchors.fill: parent
  12.  
  13.         property variant iconObj
  14.         property int startX
  15.         property int startY
  16.  
  17.         onPressed: {
  18.             startX = mouseX
  19.             startY = mouseY
  20.             var iconComp = Qt.createComponent("icon.qml");
  21.             iconObj = iconComp.createObject(parent);
  22.             iconObj.x = mouseX - iconObj.width/2
  23.             iconObj.y = mouseY - iconObj.height/2
  24.         }
  25.         onPositionChanged: {
  26.             iconObj.x += mouseX - startX
  27.             iconObj.y += mouseY - startY
  28.             startX = mouseX
  29.             startY = mouseY
  30.         }
  31.         onReleased: {
  32.             iconObj.destroy()
  33.         }
  34.     }
  35. }

 Signature 

Nokia Certified Qt Specialist.

May 29, 2011

Matahari Matahari
Lab Rat
6 posts

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

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.  width: 360
  5.  height: 360
  6.  id :root
  7.  Rectangle{
  8.   id : zoom
  9.   anchors.fill: parent
  10.   scale: 1.4
  11.   rotation: 45
  12.   Image {
  13.    id: img
  14.    source: "lenna.png"
  15.   }
  16.  }
  17.  MouseArea {
  18.   anchors.fill: parent
  19.   property real old_x : 0
  20.   property real old_y : 0
  21.  
  22.   onPressed:{
  23.    var tmp = root.mapToItem(img,mouse.x,mouse.y);
  24.    old_x = tmp.x;
  25.    old_y = tmp.y;
  26.   }
  27.  
  28.   onPositionChanged: {
  29.    var tmp = root.mapToItem(img,mouse.x,mouse.y);
  30.    var delta_x = tmp.x - old_x;
  31.    var delta_y = tmp.y - old_y;
  32.    img.x+=delta_x;
  33.    img.y+=delta_y;
  34.    old_x = tmp.x;
  35.    old_y = tmp.y;
  36.   }
  37.  }
  38. }

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

May 29, 2011

Bradley Bradley
Lab Rat
314 posts

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

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     width: 360
  5.     height: 360
  6.     id :root
  7.     Rectangle{
  8.         id : zoom
  9. //        anchors.fill: parent
  10.         scale: 1.4
  11.         rotation: 45
  12.         Image {
  13.             id: img
  14.             source: "lenna.png"
  15.         }
  16.     }
  17.     MouseArea {
  18.         anchors.fill: parent
  19.         property real old_x : 0
  20.         property real old_y : 0
  21.  
  22.         onPressed:{
  23. //            var tmp = root.mapToItem(img,mouse.x,mouse.y);
  24.             var tmp = mapToItem(root, mouse.x, mouse.y);
  25.             old_x = tmp.x;
  26.             old_y = tmp.y;
  27.         }
  28.  
  29.         onPositionChanged: {
  30. //            var tmp = root.mapToItem(img,mouse.x,mouse.y);
  31.             var tmp = mapToItem(root, mouse.x, mouse.y);
  32.             var delta_x = tmp.x - old_x;
  33.             var delta_y = tmp.y - old_y;
  34.             zoom.x += delta_x;
  35.             zoom.y += delta_y;
  36.             old_x = tmp.x;
  37.             old_y = tmp.y;
  38.         }
  39.     }
  40. }

 Signature 

Nokia Certified Qt Specialist.

May 30, 2011

franziss franziss
Lab Rat
50 posts

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.

  1. Image {
  2.     id: icon
  3.     width: 64
  4.     height: 64
  5.     source: "liverbird.gif"
  6.  
  7.     MouseArea {
  8.         id: iconMouseArea
  9.         anchors.fill: parent
  10.         width: 64
  11.         height: 64
  12.  
  13.         drag.target: parent
  14.         drag.axis: Drag.XandYAxis
  15.  
  16.     }
  17. }

May 30, 2011

Matahari Matahari
Lab Rat
6 posts

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

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

May 30, 2011

Matahari Matahari
Lab Rat
6 posts

I found it

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.  id :root
  5.  
  6.  property real mapZoom: 1.0
  7.  property real mapAngle: 45.0
  8.  
  9.  function move(x,y)
  10.  {
  11.   var tmp = mapToItem(img, x, y);
  12.   var origine = mapToItem(img, 0, 0);
  13.   img.x += tmp.x - origine.x;
  14.   img.y += tmp.y - origine.y;s
  15.  }
  16.  
  17.  
  18.  Rectangle{
  19.   id : zoom
  20.  
  21.   anchors.fill: parent
  22.   scale: mapZoom
  23.   rotation: mapAngle
  24.   Image {
  25.    id: img
  26.    source: "lena.png"
  27.   }
  28.  }
  29.  }

Thanks again for your help.

 
  ‹‹ QT Quick QmlDesigner Plugin Missing in QT Creator      Unable to open webpage sections using WebView ››

You must log in to post a reply. Not a member yet? Register here!