Results 1 to 2 of 2

Thread: qml drag coordinate of shape

  1. #1
    Join Date
    Jan 2016
    Posts
    81
    Thanks
    31
    Qt products
    Qt5
    Platforms
    Windows

    Default qml drag coordinate of shape

    hi

    I want to draw a shape that has 4 sides with unequal length and the ability to drag its apex.

    When I dragged apex, the sides that are connected to the apex were re-sized.

    I write the program for a rectangle but I want develop to trapezium like below picture.










    code for rectangle:
    Qt Code:
    1. property var selection: undefined
    2. Image {
    3. id: image1
    4. anchors.fill: parent
    5.  
    6. source: "1.jpg"
    7.  
    8. MouseArea {
    9. anchors.fill: parent
    10. onClicked: {
    11. if(!selection)
    12. selection = selectionComponent.createObject(parent, {"x": parent.width / 4, "y": parent.height / 4, "width": parent.width / 2, "height": parent.width / 2})
    13. }
    14. }
    15. }
    16.  
    17. Component {
    18. id: selectionComponent
    19.  
    20. Rectangle {
    21. id: selComp
    22. border {
    23. width: 2
    24. color: "steelblue"
    25. }
    26. color: "#354682B4"
    27.  
    28. property int rulersSize: 18
    29.  
    30. MouseArea { // drag mouse area
    31. anchors.fill: parent
    32. drag{
    33. target: parent
    34. minimumX: 0
    35. minimumY: 0
    36. maximumX: parent.parent.width - parent.width
    37. maximumY: parent.parent.height - parent.height
    38. smoothed: true
    39. }
    40.  
    41. onDoubleClicked: {
    42. parent.destroy() // destroy component
    43. }
    44. }
    45.  
    46.  
    47. Rectangle {
    48. width: rulersSize
    49. height: rulersSize
    50. radius: rulersSize
    51. color: "steelblue"
    52. anchors.left: parent.left
    53. anchors.top: parent.top
    54.  
    55. MouseArea {
    56. anchors.fill: parent
    57. drag{ target: parent; axis: Drag.XAxis }
    58. onMouseXChanged: {
    59. if(drag.active){
    60. selComp.width = selComp.width - mouseX
    61. selComp.height = selComp.height - mouseY
    62. selComp.x = selComp.x + mouseX
    63. selComp.y = selComp.y + mouseY
    64. if(selComp.width < 30)
    65. selComp.width = 30
    66. }
    67. }
    68. }
    69. }
    70.  
    71. Rectangle {
    72. width: rulersSize
    73. height: rulersSize
    74. radius: rulersSize
    75. color: "steelblue"
    76. anchors.left: parent.left
    77. anchors.bottom: parent.bottom
    78.  
    79. MouseArea {
    80. anchors.fill: parent
    81. drag{ target: parent; axis: Drag.XAxis }
    82. onMouseXChanged: {
    83. if(drag.active){
    84. selComp.width = selComp.width - mouseX
    85. selComp.height = selComp.height + mouseY
    86. //selComp.x = selComp.x + mouseX
    87. //selComp.y = selComp.y + mouseY
    88. if(selComp.width < 30)
    89. selComp.width = 30
    90. }
    91. }
    92. }
    93. }
    94.  
    95.  
    96. Rectangle {
    97. width: rulersSize
    98. height: rulersSize
    99. radius: rulersSize
    100. color: "steelblue"
    101. anchors.horizontalCenter: parent.left
    102. anchors.verticalCenter: parent.verticalCenter
    103.  
    104. MouseArea {
    105. anchors.fill: parent
    106. drag{ target: parent; axis: Drag.XAxis }
    107. onMouseXChanged: {
    108. if(drag.active){
    109. selComp.width = selComp.width - mouseX
    110. selComp.x = selComp.x + mouseX
    111. if(selComp.width < 30)
    112. selComp.width = 30
    113. }
    114. }
    115. }
    116. }
    117.  
    118.  
    119.  
    120. Rectangle {
    121. width: rulersSize
    122. height: rulersSize
    123. radius: rulersSize
    124. color: "steelblue"
    125. anchors.horizontalCenter: parent.right
    126. anchors.verticalCenter: parent.verticalCenter
    127.  
    128. MouseArea {
    129. anchors.fill: parent
    130. drag{ target: parent; axis: Drag.XAxis }
    131. onMouseXChanged: {
    132. if(drag.active){
    133. selComp.width = selComp.width + mouseX
    134. if(selComp.width < 50)
    135. selComp.width = 50
    136. }
    137. }
    138. }
    139. }
    140.  
    141. Rectangle {
    142. width: rulersSize
    143. height: rulersSize
    144. radius: rulersSize
    145. x: parent.x / 2
    146. y: 0
    147. color: "steelblue"
    148. anchors.horizontalCenter: parent.horizontalCenter
    149. anchors.verticalCenter: parent.top
    150.  
    151. MouseArea {
    152. anchors.fill: parent
    153. drag{ target: parent; axis: Drag.YAxis }
    154. onMouseYChanged: {
    155. if(drag.active){
    156. selComp.height = selComp.height - mouseY
    157. selComp.y = selComp.y + mouseY
    158. if(selComp.height < 50)
    159. selComp.height = 50
    160. }
    161. }
    162. }
    163. }
    164.  
    165. Rectangle {
    166. width: rulersSize
    167. height: rulersSize
    168. radius: rulersSize
    169. x: parent.x / 2
    170. y: parent.y
    171. color: "steelblue"
    172. anchors.horizontalCenter: parent.horizontalCenter
    173. anchors.verticalCenter: parent.bottom
    174.  
    175. MouseArea {
    176. anchors.fill: parent
    177. drag{ target: parent; axis: Drag.YAxis }
    178. onMouseYChanged: {
    179. if(drag.active){
    180. selComp.height = selComp.height + mouseY
    181. if(selComp.height < 50)
    182. selComp.height = 50
    183. }
    184. }
    185. }
    186. }
    187.  
    188.  
    189. }
    190. }
    To copy to clipboard, switch view to plain text mode 


    I try to use Canvas for write this program but I could not conclude.

    Qt Code:
    1. Canvas {
    2. width: 400
    3. height: 400
    4. Drag.active: dragArea.drag.active
    5. Drag.hotSpot.x: 10
    6. Drag.hotSpot.y: 10
    7.  
    8. MouseArea {
    9. id: dragArea
    10. anchors.fill: parent
    11. onReleased: parent.Drag.drop()
    12. drag.target: parent
    13. }
    14.  
    15. onPaint: {
    16. // Get drawing context
    17. var context = getContext("2d");
    18. // Draw a line
    19. context.beginPath();
    20. context.lineWidth = 2;
    21. context.moveTo(10, 10);
    22. context.strokeStyle = "blue"
    23. context.lineTo(10, 100);
    24. context.stroke();
    25.  
    26. context.beginPath();
    27. context.lineWidth = 2;
    28. context.moveTo(10, 10);
    29. context.strokeStyle = "red"
    30. context.lineTo(100, 10);
    31. context.stroke();
    32.  
    33. context.beginPath();
    34. context.lineWidth = 2;
    35. context.moveTo(100, 10);
    36. context.strokeStyle = "blue"
    37. context.lineTo(100, 100);
    38. context.stroke();
    39.  
    40. context.beginPath();
    41. context.lineWidth = 2;
    42. context.moveTo(100, 100);
    43. context.strokeStyle = "red"
    44. context.lineTo(10, 100);
    45. context.stroke();
    46. }
    47. }
    To copy to clipboard, switch view to plain text mode 
    Attached Images Attached Images
    Last edited by neda; 1st February 2016 at 13:06.

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: qml drag coordinate of shape

    That sounds like something that is easier solved with a custom item.

    E.g. deriving from QQuickPainted item and implementing drawing and mouse handling as needed.

    Cheers,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    neda (2nd February 2016)

Similar Threads

  1. Replies: 2
    Last Post: 30th January 2014, 07:46
  2. Coordinate space vs coordinate system
    By kangaba in forum General Programming
    Replies: 0
    Last Post: 10th December 2013, 15:38
  3. Replies: 1
    Last Post: 26th February 2013, 19:24
  4. Replies: 3
    Last Post: 10th June 2010, 16:13
  5. Paint Rect visible on Drag to crop image coordinate
    By patrik08 in forum Qt Programming
    Replies: 8
    Last Post: 17th March 2007, 10:04

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.