拖动 QML 形状的坐标

Posted 2023-02-16

【中文标题】拖动 QML 形状的坐标

【英文标题】：Drag coordinates of a QML shape

【发布时间】：2016-02-01 11:22:57

【问题描述】：

我想绘制一个有 4 条边不等长且能够拖动顶点的形状。当我拖动顶点时，与其相连的边应相应调整大小。

我找到了另一个question on SO，但建议的解决方案适用于Rectangles，而我想为梯形形状开发一个解决方案，如下图所示：

我当前的代码：

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
                    
                
            
        


    

【问题讨论】：

那么，具体的问题是什么？

【参考方案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()