QT QML 完成一个可以用鼠标改变大小和位置的矩形绘制

年底了，闲了几天，就学习了一下QML，完成一个鼠标可以交互操作的矩形绘制，个人可以想到的用途就是图像里面的ROI的设置和选取，还是有意义的，各位看完可以继续开发旋转功能，以便适应更多的应用场景。

先上个整体效果图：

1.先建立个Qt Quick 程序，我的主要QML文档如下：main.qml和Myrect.qml.前者是给窗体，用来布局Myrect元素；后者包含了矩形绘制和鼠标响应的逻辑。由于用到鼠标位置的计算，我还插入了C++类来帮助计算。

 

1.1 main.qml 的主要内容如下：创建 Myrect实例，然后在左下角用两个text来记录矩形左上角的坐标，要不光移动太单调，很无聊。

import QtQuick 2.12
import QtQuick.Window 2.12


Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {


        width: 500
        height: 500
        anchors.fill: parent
        Myrect
        {
            id:testrect
            clr:"red"
        }



        Text {
            anchors.bottom:  parent.bottom
            anchors.left: parent.left
            id: xpos
            text: qsTr("Xpos:"+testrect.rect_X.toString())
            font.pointSize: 25

        }
        Text {
            anchors.bottom:  parent.bottom
            anchors.left: xpos.right
            id: ypos
            text: qsTr("Ypos:"+testrect.rect_X.toString())
            font.pointSize: 25
        }



    }

}

mail.qml