Перетащите координаты формы QML

Question

Я хочу нарисовать форму, которая имеет 4 стороны с неравной длиной и возможность перетаскивать ее вершины. Когда я перетаскиваю вершину, стороны, связанные с ней, должны соответственно изменять размер.

Я нашел другой question on SO но предложенное решение работает для Rectangle с, тогда я хотел бы разработать решение для трапеций, как на следующей картинке:

Мой текущий код:

property var selection: undefined 
Image { 
    id: image1 
    anchors.fill: parent 

    source: "1.jpg" 

    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      if(!selection) 
       selection = selectionComponent.createObject(parent, {"x": parent.width/4, "y": parent.height/4, "width": parent.width/2, "height": parent.width/2}) 
     } 
    } 
} 

Component { 
    id: selectionComponent 

    Rectangle { 
     id: selComp 
     border { 
      width: 2 
      color: "steelblue" 
     } 
     color: "#354682B4" 

     property int rulersSize: 18 

     MouseArea {  // drag mouse area 
      anchors.fill: parent 
      drag{ 
       target: parent 
       minimumX: 0 
       minimumY: 0 
       maximumX: parent.parent.width - parent.width 
       maximumY: parent.parent.height - parent.height 
       smoothed: true 
      } 

      onDoubleClicked: { 
       parent.destroy()  // destroy component 
      } 
     } 


     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      color: "steelblue" 
      anchors.left: parent.left 
      anchors.top: parent.top 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.XAxis } 
       onMouseXChanged: { 
        if(drag.active){ 
         selComp.width = selComp.width - mouseX 
         selComp.height = selComp.height - mouseY 
         selComp.x = selComp.x + mouseX 
         selComp.y = selComp.y + mouseY 
         if(selComp.width < 30) 
          selComp.width = 30 
        } 
       } 
      } 
     } 

     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      color: "steelblue" 
      anchors.left: parent.left 
      anchors.bottom: parent.bottom 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.XAxis } 
       onMouseXChanged: { 
        if(drag.active){ 
         selComp.width = selComp.width - mouseX 
         selComp.height = selComp.height + mouseY 
         //selComp.x = selComp.x + mouseX 
         //selComp.y = selComp.y + mouseY 
         if(selComp.width < 30) 
          selComp.width = 30 
        } 
       } 
      } 
     } 


     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      color: "steelblue" 
      anchors.horizontalCenter: parent.left 
      anchors.verticalCenter: parent.verticalCenter 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.XAxis } 
       onMouseXChanged: { 
        if(drag.active){ 
         selComp.width = selComp.width - mouseX 
         selComp.x = selComp.x + mouseX 
         if(selComp.width < 30) 
          selComp.width = 30 
        } 
       } 
      } 
     } 



     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      color: "steelblue" 
      anchors.horizontalCenter: parent.right 
      anchors.verticalCenter: parent.verticalCenter 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.XAxis } 
       onMouseXChanged: { 
        if(drag.active){ 
         selComp.width = selComp.width + mouseX 
         if(selComp.width < 50) 
          selComp.width = 50 
        } 
       } 
      } 
     } 

     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      x: parent.x/2 
      y: 0 
      color: "steelblue" 
      anchors.horizontalCenter: parent.horizontalCenter 
      anchors.verticalCenter: parent.top 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.YAxis } 
       onMouseYChanged: { 
        if(drag.active){ 
         selComp.height = selComp.height - mouseY 
         selComp.y = selComp.y + mouseY 
         if(selComp.height < 50) 
          selComp.height = 50 
        } 
       } 
      } 
     } 

     Rectangle { 
      width: rulersSize 
      height: rulersSize 
      radius: rulersSize 
      x: parent.x/2 
      y: parent.y 
      color: "steelblue" 
      anchors.horizontalCenter: parent.horizontalCenter 
      anchors.verticalCenter: parent.bottom 

      MouseArea { 
       anchors.fill: parent 
       drag{ target: parent; axis: Drag.YAxis } 
       onMouseYChanged: { 
        if(drag.active){ 
         selComp.height = selComp.height + mouseY 
         if(selComp.height < 50) 
          selComp.height = 50 
        } 
       } 
      } 
     } 


    } 
} 

Answer 1

Это будет работать:

Point.qml

import QtQuick 2.0 
Item { 
    id: root 

    signal dragged() 

    Rectangle { 
     anchors.centerIn: parent 
     width: 20 
     height: 20 
     color: "blue" 
     opacity: 0.3 

     MouseArea { 
      anchors.fill: parent 
      drag.target: root 
      onPositionChanged: { 
       if(drag.active) { 
        dragged() 
       } 
      } 
     } 
    } 
} 

main.qml:

import QtQuick 2.5 
import QtQuick.Window 2.2 

Window { 
    visible: true 

    width: 600 
    height: 600 

    Point { 
     id: pointA 
     x: 50 
     y: 50 
    } 

    Point { 
     id: pointB 
     x: 250 
     y: 50 
    } 

    Point { 
     id: pointC 
     x: 250 
     y: 250 
    } 

    Point { 
     id: pointD 
     x: 50 
     y: 250 
    } 


    Item { 
     anchors.fill: parent 

     Canvas { 
      id: canvas 
      anchors.fill: parent 
      onPaint: { 
       var ctx = canvas.getContext('2d'); 
       ctx.moveTo(pointA.x, pointA.y); 
       ctx.lineTo(pointB.x, pointB.y); 
       ctx.lineTo(pointC.x, pointC.y); 
       ctx.lineTo(pointD.x, pointD.y); 
       ctx.lineTo(pointA.x, pointA.y); 
       ctx.stroke(); 
      } 
      Component.onCompleted: { 
       pointA.dragged.connect(repaint) 
       pointB.dragged.connect(repaint) 
       pointC.dragged.connect(repaint) 
       pointD.dragged.connect(repaint) 
      } 

      function repaint() { 
       var ctx = getContext("2d"); 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
       ctx.beginPath(); 
       requestPaint() 
      } 
     } 
    } 
}